自如大前端-web动画探索(一)

前端项目直面客户，为了更好的交互体验，免不了需要使用动画来增香提味。在此分享自如动画的尝试与探索。

一、简单的过渡效果transition

使用transition实现：位移、旋转、缩放、透明度等简单过渡效果。

**优点：**流畅、简单。
**缺点：**仅能实现简单动画，仅能监控动画结束（transitionend），无法实现用户交互。

transitionend（结束）事件监控：

<template>
 <div class="box1" ref="box1" :class="{move: isMove}" @click="isMove=!isMove"></div>
</template>
<script lang="tsx">
import { Component, Vue } from 'vue-property-decorator';
@Component({ name: 'index' })
export default class Index extends Vue {
 private isMove: boolean = false;
 private transitions: any = {
    'transition':['transitionend'],
    'OTransition':['otransitionend'],
    'MozTransition':['mozTransitionEnd'],
    'WebkitTransition':['webkitTransitionEnd']
 };
 mounted(){
     let _style = (this.$refs.box1 as any).style;
     for(let t in this.transitions){
         if( _style[t] !== undefined ){
         this.transitions[t].map((element:string)=>{
             (this.$refs.box1 as any).addEventListener(element, ()=>{this.callBack(element)}, false);
             });
         }
     }
 }
 callBack(type:string){
     // do something
     console.log(type); // transitionend
 }
}
</script>
<style lang="scss" scoped>
.box1{
     width: 100px;
     height: 100px;
     background: #999;
     transition: all 0.5s;
     &.move{
        transform: translateX(100px);
     }
}
</style>

二、逐帧动画

动画的速度曲线 animation-timing-function ：

除了以上常规用法，还有一个实用的函数：

阶梯函数：steps(n,direction)，这个函数能够起到定格动画的效果。阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

n：阶梯数（必须是一个正整数），它将动画的总时长按照阶梯数等距划分

direction：可选值为start或end，默认end。

start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；

end则表示动画从第一帧开始到正常结束；

**优点：**能实现较复杂的动画

**缺点：**图片资源容易过大，

仅能监控动画开始（transitionstart）、结束（transitionend）、重复（animationiteration），无法实现用户交互。
1、实现

1）生成雪碧图（横向纵向均可），在线生成雪碧图地址：

https://www.toptal.com/developers/css/sprite-generator

2）使用animation的steps实现动画：

<template>
 <div class="canvas">
 <div  v-for="(item,index) in list" :key="index" :class="`step ${item.className||''} ani-${item.i