前端程序媛教你美颜年终账单

4,215 阅读3分钟

image

背景

2020将至,我们手机很多app会给我们推送各种炫酷的年终账单,相信有不少的小伙伴见过有类似效果。话不多说,下面我们一起来学习如何制作吧。

从技术人员的角度来说: 年终账单= 页面滑动 + dom动画 + 数据

对前端工作人员来说: 页面滑动和dom动画是最重要。

页面滑动和dom动画分开做,都不难,都很容易实现。 但如何让页面滑动和dom动画配合的天一无缝呢??

2、开发过程

1)引入 vue-awesome-swiper实现页面滑动

npm install --save vue-awesome-swiper

引入方式两种分别

a) 全局引入(在main.js中引入)

import vueAwesomeSwiper from 'vue-awesome-swiper'
import  './static/css/swiper.min.css'(下载到了本地)
Vue.use(vueAwesomeSwiper)

b) 局部(在组件中)

import { swiper, swiperSlide } from 'vue-awesome-swiper'
components: {
      swiper,
      swiperSlide,
    }

页面初始化

<swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
      <swiper-slide >
        <first-page></first-page>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <old-driver-page></old-driver-page>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <join-page></join-page>
      </swiper-slide>
    </swiper>
  data() {
      return {
        swiperOption: { // 初始化参数
          direction: 'vertical', // 垂直切换选项
          autoplay: false, // 是否自动播放
          height : window.innerHeight, // 高
          width:window.innerWidth //宽
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper 
      }
    },
    mounted(){
       this.swiper.slideTo(0,0, false); //跳到指定页
    },

引入选择任意一种方式都可以,项目启动,页面滑动效果完成。

2)引入animate.css

引入animate.css

npm install animate.css --save

main.js中引入

import animated from 'animate.css'
Vue.use(animated)

####3)引入swiper.animate1.0.3.min.js

重点来了!!!!

页面滑动和dom动画的链接着:swiper.animate

下载地址:https://www.swiper.com.cn/download/index.html#file8

组件引入:
import * as swiperAnimated from './../../static/js/swiper.animate1.0.3.min.js'

组件配置:

data() {
   return {
     swiperOption: {
       direction: 'vertical', // 垂直切换选项
       autoplay: false,
       height: window.innerHeight,
       width: window.innerWidth,
       on: {
         init: function () {
           swiperAnimated.swiperAnimateCache(this); //隐藏动画元素 
           swiperAnimated.swiperAnimate(this); //初始化完成开始动画
         },
         slideChangeTransitionEnd: function () {
           swiperAnimated.swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
         }
       }
     }
   }
 },

动画的Dom上添加:

swiper-animate-effect:切换效果
swiper-animate-duration:可选,动画持续时间(单位秒
swiper-animate-delay:可选,动画延迟时间(单位秒)

启动项目,项目报错

我们打开swiper.animate1.0.3.min.js发现该文件并没有export使用的几个方法,

自己修改swiper.animate1.0.3.min.js文件, 修改完后的文件:

export function swiperAnimateCache(a) {
  for (var  j = 0; j < a.slides.length; j++)
    for (let allBoxes = a.slides[j].querySelectorAll(".ani"), i = 0; i < allBoxes.length; i++){
      allBoxes[i].attributes["style"] ? allBoxes[i].setAttribute("swiper-animate-style-cache", allBoxes[i].attributes["style"].value) : allBoxes[i].setAttribute("swiper-animate-style-cache", " "), allBoxes[i].style.visibility = "hidden"
    }
}


export function swiperAnimate(a) {
   clearSwiperAnimate(a); 
   const b = a.slides[a.activeIndex].querySelectorAll(".ani");
    for (let  i = 0; i < b.length; i++){
      b[i].style.visibility = "visible"
      const effect = b[i].attributes["swiper-animate-effect"] ? 
      b[i].attributes["swiper-animate-effect"].value : "" 

      b[i].className = b[i].className + "  " + effect + " " + "animated"

      const style = b[i].attributes["style"].value

      const duration = b[i].attributes["swiper-animate-duration"] ?
      b[i].attributes["swiper-animate-duration"].value : "" 

      duration && (style = style + "animation-duration:" + duration + ";-webkit-animation-duration:" + duration + ";")

      const  delay = b[i].attributes["swiper-animate-delay"] ? b[i].attributes["swiper-animate-delay"].value : ""

      delay && (style = style + "animation-delay:" + delay + ";-webkit-animation-delay:" + delay + ";")
      b[i].setAttribute("style", style) 
    }
  }
  

export function clearSwiperAnimate(a) { 
  for (var j = 0; j < a.slides.length; j++){
    let allBoxes = a.slides[j].querySelectorAll(".ani")
    for (let i = 0; i < allBoxes.length; i++){
       allBoxes[i].attributes["swiper-animate-style-cache"] && allBoxes[i].setAttribute("style", allBoxes[i].attributes["swiper-animate-style-cache"].value)
       allBoxes[i].style.visibility = "hidden"
       allBoxes[i].className = allBoxes[i].className.replace("animated", " ")
       const effectV = allBoxes[i].attributes["swiper-animate-effect"].value 
       allBoxes[i].attributes["swiper-animate-effect"] && (effectV,allBoxes[i].className = allBoxes[i].className.replace(effectV, " ")) }
    }
  } 

文件自己修改,技术能力有限,如果谁有更好的修改方法,欢迎留言沟通。

dom的动画效果配置 www.swiper.com.cn/usage/anima… (swiper官网)

dome效果:pan.baidu.com/s/1pALAcGfA…

最后

以上是我实现一个年终账单的页面活动和dom动画效果的全部过程,希望对大家有所帮助