一、过渡、动画、转换间的总结

对应链接

• 手动触发-->改变属性 + transition属性说明=css过渡
• css写好触发->改变属性+ animation属性说明=css动画
• 转换可以看成一系列的属性变化。=>转换也可以结合过渡或动画

---

• 过渡，属性都是并行过渡的（并行），
• 动画，可以理解为多组过渡(组间是串行，组内是并行)

---

补充

• 过渡是手动触发，可能变动了很多属性，但只选部分属性需要过渡或全部
  所以，transition指定需要的属性 或者所有的all
• 动画是css写好，即写到动画里面的属性才会改变，即代表这些需要过渡

1.过渡语法：
transition: width 1s linear 2s，[...]; //属性 时长 曲线 延迟。可以多属性

2.动画语法：
animation: myfirst 5s linear 2s infinite alternate;//动画名称 一周时长 曲线  延迟 播放次数 是否反转

3.转换语法：
transform: none|transform-functions;//translate(e,f)偏移； scale(a,d)缩放； rotate(α)旋转；
transform-origin:50% 50% 0%;//设置中心点

二、小程序 动画

• 区别：采用Js来写动画：真正来说是多组过渡组成的动画
• js来编辑的，所以没变过延时属性
• 当然小程序也可以用css来写动画，推荐css来写动画推荐阅读

1. 动画属性语法

const animation = wx.createAnimation({//动画名称
      duration: 1000,//一周时长
      timingFunction: 'ease',//曲线
      transformOrigin:'50% 50% 0'//设置中心点
    })

2. 定义动画

1.常用属性
宽高、定位属性(top...)、背景颜色、透明度

2.转换函数
偏移、缩放、旋转、矩阵

3.定义一组过渡
animation.step({ //属性和 wx.createAnimation({//动画名称一样的
      duration: 1000,//一周时长
      timingFunction: 'ease',//曲线
      transformOrigin:'50% 50% 0'//设置中心点
})
//如果分组设置了时长，则其它组时长为总时间-这个分组的时长

4.多个step组成多组过渡=>动画

3. 动画执行

1. <view animation="{{animationData}}"></view>

2. data: {
    animationData: {}
  },

3. this.setData({
      animationData: animation.export()
   })