كما هو الحال دائما، مجرد إلقاء نظرة على الصور!
التأثير هو كما يلي:
صور عالية الدقة كبيرة!
أعمل كمبرمج منذ سنوات عديدة، لكن عيني القديمة خافتتان ولا أستطيع رؤية الرسوم المتحركة بوضوح؟ ! ثم انظر إلى لقطات الشاشة الثابتة! ! !
آثار الدرجات المختلفة هي كما يلي:
بعد مشاهدة عرض البائع، دعونا نلقي نظرة على عملية إنتاج المنتج!
يرسم Canvas دائرة 1. في vue، يكون الكود الموجود في <template lang=pug> كما يلي:
Canvas#baseCanvas هي الحلقة الرمادية في الأسفل
Canvas#myCanvas هي الحلقة الملونة أعلاه
نحن بحاجة إلى استخدام أسلوب CSS لمساعدتنا في تغطية الحلقة الملونة أعلى الحلقة الرمادية.
2. أسلوب CSS : 3. كود الرسم بنمط js-canvasهذا الرمز أيضًا بسيط جدًا، ما عليك سوى إلقاء نظرة على Canvas API
3-1 في مكون vue، حدد المتغيرات المطلوبة في أعلى علامة البرنامج النصي.
3-2 في كائن الأسلوب، يتم تعريف ثلاث طرق:
drawBaseCanvas: يستخدم لرسم الحلقة الرمادية السفلية. نظرًا لأن الدائرة الرمادية ليس لها تأثير متحرك، فما عليك سوى رسم دائرة رمادية كاملة في البداية. drawClrCanvas: يستخدم لرسم الحلقة الملونة أعلاه. ClearCanvas: يستخدم لمسح القماش. هذا هو ما تتطلبه الرسوم المتحركة للحلقة الملونة. لأن جوهر تأثير الرسوم المتحركة للحلقة لدينا هو مسح الحلقة الملونة بين الحين والآخر، ثم زيادة قيمة زاوية النهاية وإعادة رسمها، بحيث تكون رسوم متحركة مستمرة.
وهذا هو الكود الخاص بالطرق الثلاث:
الأكواد الموجودة في الطرق الثلاث المذكورة أعلاه هي جميع تطبيقات Canvas API تقريبًا، ما عليك سوى قراءة البرنامج التعليمي.
فقط في طريقة draoClrCanvas، عند رسم دائرة قماشية، يتم تعيين قيمة البداية وقيمة النهاية في معلمة القوس.
تحدد قيمة البداية موضع رسم البداية للدائرة، وقيمة النهاية تحدد موضع النهاية (يبدو أنني قلت هراء، لكن بعد التفكير مليًا في نص وصف الفكرة، لا أريد حذفه هاهاها)
حساب هذه القيمة النهائية أمر مزعج للغاية بالنسبة لي.
لماذا يجب أن يتم حساب متغير العدد بهذه الطريقة؟ لقد نسيت كيف اكتشفت ذلك.
this.grade هو عدد صحيح موجب ضمن 100، يشير إلى النتيجة. يتم تعريفه في البيانات، والافتراضي هو 0 نقطة.
لذا فإن الدائرة الملونة تكون غير مرئية في البداية لأن نقطة البداية ونقطة النهاية كلاهما 0 نقطة.
إذا قمت بتغيير قيمة الدرجة، من 0 إلى 100، فستتغير قيمة حلقة ألوان القماش أيضًا.
بهذه الطريقة، طالما قمنا بتعديل قيمة الدرجة تدريجيًا وإعادة رسمها، ستزداد الحلقات الملونة تدريجيًا لتحقيق تأثير الرسوم المتحركة.
تأثير الرسوم المتحركة الدائرينظرًا لاحتياجاتي الخاصة هنا، يجب تشغيل الرسوم المتحركة في كل مرة يتحول فيها المستخدم إلى أداة السحب حيث توجد اللوحة القماشية (في وقت لاحق، يصبح الأمر أكثر إزعاجًا ويتطلب أن يكون للرسم البياني وأجزاء اللوحة تأثير دخول قبل بدء الرسوم المتحركة. التأثير هو الأطول في الصورة أعلاه (مثل تلك الرسوم المتحركة المتحركة).
لذلك لا بد لي من استخدام swiper لتحقيق ذلك. في وظيفة رد الاتصال الخاصة بمفتاح الضرب، تتم زيادة درجة الدرجة بشكل مستمر من 0، ويتم إعادة تشغيل رسم الحلقة الملونة لتحقيق تأثير الرسوم المتحركة.
أداة الضرب التي أستخدمها في vue هي "vue-awesome-swiper". لقد كتبت خطوات استخدامها في مقالات أخرى.
يوجد كائن قيد التشغيل في تكوين swiper في vue-data. وظيفة SlideChange في الكائن on هي وظيفة رد الاتصال التي يتم تشغيلها في كل مرة يقوم فيها الممسح بقلب الصفحة.
وسأتحدث هنا عن بعض النقاط الخاصة:
(1) vm: هو متغير قمت بتخزينه في البرنامج النصي vue، تمت تهيئته إلى قيمة خالية، ثم تم تثبيته، وتم تعيينه ككائن مثيل vue.
تهيئة البيانات ورسم دوائر رمادية
من خلال هذه الطريقة، أحصل على قيم سمات Grade وgradeTarget في وظيفة رد الاتصال object-data-swiper-callback لمثيل vue وقم بتعديلها.
ملاحظة: لا أعرف ما إذا كان هذا أسلوبًا غبيًا، عندما فعلت ذلك، واجهت مشكلة لم أكن أعرف كيفية الحصول على مثيل vue في رد الاتصال الخاص بـ swiper. لذلك كانت هناك طريقة منحنية لإنقاذ البلاد. إذا كان لدي حل أفضل، أتمنى أن تزودني بفكرة جديدة، شكرًا جزيلاً لك عزيزتي.
(2) (this.activeIndex == 2 && vm.isStar) || (this.activeIndex == 1 && !vm.isStar)
يتم إصدار هذا الحكم بسبب العمل ويمكن تجاهله.
يشير هذا إلى كائن swiper في وظيفة swiperChange. this.activeIndex هي خاصية لمثيل swiper، من الناحية الرسمية، تقوم بإرجاع فهرس الكتلة النشطة الحالية (كتلة التنشيط). يمكنك أن تفهم أنه يشير إلى الصفحة التي تنتقل إليها حاليًا، وهي الصفحة السفلية لشريحة التمرير التي تنظر إليها حاليًا.
نظرًا لهويتي كمستخدم، سأقرر بشكل حاسم ما إذا كنت سأعرض الصفحة السابقة من أداة التمرير حيث توجد اللوحة القماشية الحالية. إذا لم يتم عرضها، فلن يتم رسم الصفحة السابقة على الإطلاق، وسيصبح رمز التمرير المقابل للصفحة الحالية (index-1).
بشكل عام، عندما يتم استيفاء الشروط وينتقل المستخدم إلى صفحة التمرير حيث توجد اللوحة القماشية، سأقوم بتشغيل منطق الرسم الدائري في if. بخلاف ذلك، انتقل إلى آخر لتهيئة حالة صفحة البيانات، وقم بإلغاء تحديد المؤقت لإيقاف الرسوم المتحركة مؤقتًا، ومسح الحلقة الملونة.
(3)vm.aniShow
كما ذكرنا في مقالتي الأخيرة "رسم الرسوم البيانية باستخدام Pure CSS"، ينبغي مناقشة الرسوم المتحركة للرسم البياني مع الرسوم المتحركة للقماش. لأن تنفيذ الرسوم المتحركة الخاصة بهم يحتاج إلى التعاون مع تبديل الضرب. هذا هو الرمز هنا:
عندما تصبح السمة vue - data - aniShow صحيحة، سيتم إضافة اسم الفئة ani إلى div.row:
وبالمثل، إذا كان aniShow صحيحًا، فسيتم ربط ارتفاع التقدم بالقيمة المستهدفة الخاصة به، أي أنه سيتم تعيين الارتفاع الفعلي للتقدم إلى ارتفاع سمة النمط بعد تحويله كنسبة مئوية.
في هذا الوقت، نظرًا لأن انتقال التقدم يراقب تغير الارتفاع، يبدأ الرسم البياني الذي يزيد الرسوم المتحركة مع زيادة الارتفاع.
تحت اسم فئة العاني، يحقق تأخير انتقال التقدم تأثيره المتزايد المتدرج للغاية.
قد يكون من المربك مجرد قراءة وصف النص، ولكن ألق نظرة أخرى على التأثير:
(4) جزء رمز رسم دائرة اللون
GradeTarget هي النتيجة الفعلية، وهي النتيجة النهائية التي سيتم رسمها.
يبدأ التقدير من 0 ويزداد إلى حجم GradeTarget.
لم أكن أقصد ++vm.grade مباشرة هنا، ولا أعرف ما الذي كنت أفكر فيه في ذلك الوقت.
إذا حكمت، إذا زادت الدرجة إلى القيمة المستهدفة GradeTarget أو كانت أكبر من القيمة المستهدفة، توقف عن الزيادة واترك Grade=gradeTarget. الحكم الذي ينتمي إلى القيمة الحرجة. في وظيفة الحركة، يعتبر أيضًا اكتشاف الاصطدام.
على العكس من ذلك، إذا لم يتم الوصول إلى الهدف، فسيتم مسح آخر لوحة قماشية تم رسمها، وسيتم إعادة رسم حلقة ملونة جديدة بعد تغيير التقدير بشكل تدريجي.
(5) ضع كل ذلك في setTimeout، وتوقف مؤقتًا لمدة 500 مللي ثانية قبل التنفيذ، من أجل انتظار دخول المخطط الشريطي والمخطط الحلقي إلى السوق قبل البدء في رسم التأثير المتزايد للدائرة.
في الواقع، يعد الكود أعلاه عملية منطقية بسيطة جدًا، ويجب أن يتمكن القراء من فهمها بعد قراءة الكود مرة واحدة.
أفكار جديدة:
لقد قمت بهذا التأثير منذ وقت طويل عندما كنت أقوم بفرز طريقة الإنتاج اليوم، فكرت في حل الأمثل للتعليمات البرمجية الخاصة بي:
في الواقع، ليست هناك حاجة لإعادة استدعاء طريقة رسم دائرة الألوان في المؤقت. ما قمنا بتغييره مباشرة هو السمة this.grade وسيكون من الجيد مراقبة التغييرات في هذه السمة. بهذه الطريقة، عندما يتم تعديل هذه الخاصية في المؤقت، سيتم تنفيذ طريقة الرنين تلقائيًا.
هذه لا تزال فكرة ولا تزال بحاجة إلى ممارستي.
التأثير المتزايد للنص الأوسط:نظرًا لأن الدرجة عبارة عن درجة متزايدة في كل مرة، يمكنك استخدام ربط بيانات Vue ثنائي الاتجاه لربط الدرجة مباشرة كقيمة درجة لعرض DOM المقابل.
أخيرًا، يتم دمج الرسوم المتحركة للحلقة والمخطط الشريطي أعلاه مع الرسوم المتحركة للتحكم في تأخير الرسوم المتحركة. بسيط جدا.
كود المصدر الخاص بـ Index.vue:
(ملاحظة، تم تنظيم كود المصدر قليلاً واستخراجه بشكل منفصل. للاكتمال ولحماية رموز الأعمال الأخرى، تم تعديل بعض أسماء المتغيرات، والتي قد تكون مختلفة قليلاً عن لقطات الشاشة السابقة)
<template lang='pug'> .indexs#Indexs.app-bg Transition(name=fade) swiper#swiperBox(:options=swiperOption ref=mySwiper) swiper-slide.swiper-slide1 .container .up swiper-slide.swiper -slide2(v-if=isShow) .my-shark .up swiper-slide.swiper-slide3 .container .data-cont .data.data01 .data01-charts .row(v-for='item,index in Data' :key=index :class='aniShow ? ani:') . data-txt {{item.grade > 0 ? item.grade : 'لا توجد بيانات'}} .progress(:class='item.grade == 0 ? ) : 0) +'rem')span.pg-data .week {{item.week}} .data.data02 .data02-charts .canvas-box //- baseCanvas Canvas#baseCanvas.my-canvas(ref=baseCanvas width=174 height=174) //- Canvas Canvas#myCanvas.my-canvas.clr-canvas(ref=myCanvas width =174 الارتفاع=174) .canvas-data #[span.num {{grade}}]النقاط</template><script>var vm = null, timer1 = فارغة، / * القيمة الأساسية للقماش * / c = فارغة، //document.getElementById(myCanvas)؛ ctx = فارغة، //canvas-2d Canvas x = 161 / 2 + 1، // تنسيق مركز الدائرة r = (161) - 10) / 2; //حجم نصف القطر/* مكون swiper*/import { swiper, swiperSlide } from vue-awesome-swiper;import { getData } from ../io/getData;export default { الاسم: الفهارس، المكونات: { swiper، swiperSlide }، data() { return { Grade: 0, // درجة الرسم البياني الدائري GradeTarget: 78.54, // رقم النتيجة الفعلية ، يمكنك تعديل isShow: true بعد طلب البيانات عبر ajax، // ما إذا كان سيتم عرض ممسحة الصفحة الثانية aniShow: false، // ما إذا كان سيتم تمكين الرسوم المتحركة لمخطط العمود Data: [{week: الأسبوع الأول الدرجة: 0 }، { الأسبوع: الأسبوع الثاني، الدرجة: 30 }، { الأسبوع: الأسبوع الثالث، الدرجة: 99.99 }، { الأسبوع: الأسبوع الرابع، الدرجة: 76.98 }، { الأسبوع: الأسبوع الخامس، الدرجة: 100 }], swiperOption: { // معلمات swiper notNextTick: صحيح، الاتجاه: عمودي، GrabCursor: صحيح، setWrapperSize: صحيح، الارتفاع التلقائي: صحيح، SlidesPerView: 1، عجلة الماوس: خطأ، تحكم عجلة الماوس: خطأ، الارتفاع: window.innerHeight، // إعداد الارتفاع، ملء مقاومة ارتفاع الجهاز: 0، مراقبة الآباء: صحيح، الشريحة الأولية: 2 - 1، // عند ضبط التهيئة ، صفحة العرض الافتراضية للتمرير، بدءًا من الصفر على: { SlideChange() { if ( (this.activeIndex == 2 && vm.isShow) ||.(this.activeIndex == 1 && !vm.isShow) ) { console.log(this.activeIndex, vm.isShow, draw Animation); setTimeout(function() { // عرض الرسوم المتحركة للرسم البياني vm.aniShow = true; // يقوم المؤقت باستمرار بتشغيل رسم الحلقات الملونة لتحقيق تأثير الرسوم المتحركة الدائري timer1 = setInterval(function() { // تغيير كتابة النتيجة المتوسطة var num = vm.grade; num++; if (num >= vm.gradeTarget) { vm.grade = vm.gradeTarget; / 60); }, 500); بعد قلب الصفحة، قم بتهيئة حالة صفحة البيانات، وامسح المؤقت لإيقاف الرسوم المتحركة مؤقتًا، وامسح الحلقات الملونة console.log (other pages); ClearInterval(timer1); vm.aniShow = false ; vm.clearCanvas (); } } } } }; this.$refs.myCanvas; ctx = c.getContext(2d); this.drawBaseCanvas() }, الأساليب: { drawBaseCanvas() { // الرسم على القماش/* القيمة الأساسية*/ var c = this.$refs.baseCanvas , //document.getElementById(myCanvas); // ctx = c.getContext(2d), o = x, randius = r; /*الدائرة الرمادية الافتراضية*/ ctx.strokeStyle = #eee; ctx.lineWidth = 10; ctx.beginPath(); }, ClearCanvas() { // مسح اللوحة القماشية ctx.clearRect(0, 0, 200, 200 }, drawClrCanvas() { var gradient = ctx.createLinearGradient(75, 50, 5, 90); gradient.addColorStop(0, #C88EFF); لملء ctx.lineWidth = 10؛ ctx.lineCap = round؛ ctx.shadowColor = rgba(191,142,255, 0.36); ctx.shadowBlur = 8; ctx.shadowOffsetY = 8; var count = this.grade / (100 / 2) + 1; x، r، Math.PI، Math.PI * count، false)؛ ctx.stroke(); } }};</script><style lang='scss'>// column Chart.row { Position: z-index: 1; width: 0.61rem; - 0.08 - 0.38rem؛ محاذاة النص: المركز؛ }.data-txt { حجم الخط: 0.2rem؛ 0.2rem; #{$i}) { .progress { تأخير الانتقال: #{$i * 0.15}s; } } } // &:nth-of-type(1) { // .progress { // تأخير الانتقال: .4s؛ // } // } // &:nth-of-type(2) { // .progress { // تأخير الانتقال: .8s؛ } // } // &:nth-of-type(3) { // .progress { // تأخير الانتقال: 1s; // } // } // &:nth-of-type(4) { / / .تقدم { // تأخير الانتقال: 1.4s; // } // } // &:nth-of-type(5) { // .progress { // تأخير الانتقال: 1.8s; // } // }}.pg- البيانات { العرض: عرض الكتلة: 0.12rem؛ الارتفاع: 100%؛ الهامش: 0 تلقائي؛ الخلفية: تدرج خطي (0deg, #c88eff 0%, #7e5cff 100%)؛ ظل الصندوق: 0 -0.04rem 0.14rem 0 rgba(129, 93, 255, 0.4); البيانات { نصف قطر الحدود: 0؛ الخلفية: #e7e7e7؛ لا شيء }).week { حجم الخط: 0.2rem؛ ارتفاع الخط: 0.2rem؛ الهامش العلوي: 0.08rem؛ }// مخطط دائري - بيانات data02 Part.data02-charts { : 0.32 ريم؛ الارتفاع: 1.61 ريم؛ }.canvas-box { الموضع: نسبي؛ 1.61rem؛ الارتفاع: 1.61rem؛ .my-canvas { العرض: 1.61rem؛ }.clr-canvas { الموضع: اليسار المطلق: 0؛} .canvas-data { الموضع: مطلق؛ الأعلى: 0.56rem؛ اليسار: 0؛ الهامش: تلقائي؛ -0.1rem; محاذاة النص: حجم الخط: 0.24rem .num { حجم الخط: 0.32rem;ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.