uni-animation动画操作记

uni-animation动画操作记

vue实现手风琴效果

页面代码大致如下：

<block v-for="(list,index) in HTTLists" :key="index">
			<view class="HTT_box uni-list">
				<view  @click="spred(index)" style="display: flex;flex-direction: row;justify-content: space-between;padding: 20upx;">
					<view class="HTT_title">
						{{list.HCName}}
					</view>
					<view :animation="animationData[index]" style="color: gray;font-size:40upx;" >></view>
				</view>
				<block v-if="(showNum == index) ? true:false" v-for="(item,j) in list.HCTT" :key="j">
					<view class="uni-list" @click="doSub(item.Key,list.HCName)">
						<uni-list-item :title="item.Key"  show-arrow=false></uni-list-item>
					</view>
				</block>
			</view>
		</block>

通过spred()方法控制内层列表的展开与收缩，当点击当前列表时，程序比较简单主要是实现状态翻转。并通过v-if指令控制内层列表的显示。

加入> ，并添加动画

一般可操作的列表，右侧都有一个>图标。现在希望在列表是收缩状态时图标指向右侧，列表展开时图标指向下方。因此引入uni-animation。实现这样一个简单的动画。
首先在页面放置>图标，对该图标设置动画属性：

<view :animation="animationData[index]" style="color: gray;font-size:40upx;" >></view>

手风琴效果是对多列表的处理，因此我这里我将动画对象放在了数组animationData中，index是外层循环的索引。
现在该效果实现的思路是这样：在每次操作的时候，先将所有的>图标指向右侧rotate(0);
然后再将点击展开的那一项图标设置为指向下部rotate(90);

问题记录

因为我将所有的动画对象放置在数组animationData中，因此我采用循环的方法将所有的动画对象都设置为rotate(0);

animation.rotate(0).step(); 
var len = this.animationData.length;
				for( let i = 0; i<len; i++ ){
					this.animationData[i] = animation.export();
				}

但是发现只有第一个列表项会在其他项展开的时候将>图标指向右侧，其他位置的展开项并无此效果。后台翻阅官方资料才知道**export 方法每次调用后会清掉之前的动画操作，**难怪只有第一项才会旋转归位，知道问题原因之后，解决问题就比较简单了

var len = this.animationData.length;
				for( let i = 0; i<len; i++ ){
					animation.rotate(0).step();  //export 方法每次调用后会清掉之前的动画操作，所以该语句应放入循环
					this.animationData[i] = animation.export();
				}

最后总结一下uni-animation动画的使用步骤

1. 使用uni.createAnimation创建一个动画，并指定动画时长，动画效果等。
2. 设计动画效果（放大，旋转，平移等）调用step()方法，该方法可链式使用，并可以指定动画时长等参数
3. 用export导出对象（注意：export 方法每次调用后会清掉之前的动画操作）因此即使同一动画效果也需要每次都重新设计。
4. 清空动画（非必须）有时候我们希望动画如点赞可以重复执行，则我们需要在动画执行完毕后清空动画，或者动画归位。不然再一次点击的时候不会再产生动画效果，因为同一动画只会针对元素最原始的状态执行，而不会在元素改变之后的状态上执行。