小程序 动画

小程序的动画和css的动画区别:
	还原时需要手动清除动画过程添加的参数

1、过渡动画
	wx.createAnimation  新版小程序基础库中推荐使用this.animate接口代替,使用方式和this.animate相似
	
	通过该接口,只能使用这些提供好的属性,不能使用额外的css属性！
	this.animate('选择器',[{
		offset:0,		当前动画的占比,0-1
		offset			
		ease	linear	
		transformOrigin	
		backgroundColor	
		bottom:Number|String			
		height			
		left			
		width			
		opacity			
		right			
		top				
		matrix			
		matrix3d		
		rotate			
		rotate3d		
		rotateX			
		rotateY			
		rotateZ			
		scale:[x方向缩放,y方向缩放]			
		scale3d			
		scaleX			
		scaleY			
		scaleZ			
		skew			
		skewX			
		skewY			
		translate		
		translate3d		
		translateX		
		translateY		
		translateZ		
	},{
		offset:0.5  	当前动画的占比时间
		...可设置多个动画帧
		
	}],过渡时间,function(){
		动画结束回调,回调中注意绑定this
	}.bind(this))
	
2、滚动过程动画
	滚动过程和this.animate不同,滚动过程设置的属性可以是this.animate提供的属性以外的css属性,使用驼峰命名
	
	this.animate('选择器,只支持选择scroll-view中的元素',[{
	
		除了支持this.animate中的配置外,还支持驼峰命名的其他css属性
	    borderRadius: '25%',
	    borderColor: 'blue',
	    transform: 'scale(.65) translateY(-20px)',
	    
	},{...}], 动画时间, {
		scrollSource			指定滚动元素的选择器(只支持scroll-view),该元素滚动时会驱动动画的进度
		orientation				指定滚动的方向,效值为"horizontal"|"vertical"
		startScrollOffset		n,指定开始驱动动画进度的滚动偏移量,单位px
		endScrollOffset			n,指定停止驱动动画进度的滚动偏移量,单位px
		timeRange				起始和结束的滚动范围映射的时间长度,该时间可用于与关键帧动画里的时间(duration)相匹配,单位ms
									当设置了滚动动画后,duration等已经失效,动画只和滚动距离有关
									当timeRange=动画时间,则抵达endScrollOffset时结束动画
									当timeRange>动画时间,则抵达endScrollOffset之前结束动画
									当timeRange<动画时间,则抵达endScrollOffset之后也不会到动画的最后一帧
	})

3、css方式
	通过css来设置动画,如果setData过多,会造成小程序僵死
	优化:通过wxs来绑定事件等产生动画,在视图层处理,避免与逻辑层交互

4、监听动画
	transitionend			CSS 渐变结束或wx.createAnimation结束一个阶段
	animationstart			CSS 动画开始
	animationiteration		CSS 动画结束一个阶段
	animationend			CSS 动画结束
	
	这几个事件都不是冒泡事件,需要绑定在真正发生了动画的节点上才会生效。
	使用时:bindtransitionend
	
5、清除动画
	调用animate API后会在节点上新增一些样式属性覆盖掉原有的对应样式。
	如果需要清除这些样式,可在该节点上的动画全部执行完毕后使用this.clearAnimation清除这些属性。
	
	this.clearAnimation('选择器',{
		要清除的属性,不写全部清除
		opacity: true, 
		rotate: true,
		...
	}, function(){
		清除完成后的回调函数
	})

代码实例:

this.animate('#container', [
  { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
  { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
  { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
  ], 5000, function () {
    this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
      console.log("清除了#container上的opacity和rotate属性")
    })
}.bind(this))


this.animate('.avatar', [{
  borderRadius: '0',
  borderColor: 'red',
  transform: 'scale(1) translateY(-20px)',
  offset: 0,
}, {
  borderRadius: '25%',
  borderColor: 'blue',
  transform: 'scale(.65) translateY(-20px)',
  offset: .5,
}, {
  borderRadius: '50%',
  borderColor: 'blue',
  transform: `scale(.3) translateY(-20px)`,
  offset: 1
}], 2000, {
  scrollSource: '#scroller',
  timeRange: 2000,
  startScrollOffset: 0,
  endScrollOffset: 85,
})