uni.createAnimation创建动画

uniapp中创建动画可以使用css的@keyframes，或者canvas，本文是使用uni.createAnimation。

 

 

<template>
	<view class="">
		<view :animation="animationData" >这是一个测试动画</view>
	</view>
</template>

<script>
export default{
//页面加载后立即执行
  onShow: function(){
    var animation = uni.createAnimation({
		duration: 2000, //动画持续时间
		timingFunction: 'linear', //动画运动的样式，此处是均速
    })

    this.animation = animation
//变换背景色和透明度（从0到1）
	animation.backgroundColor('#ff6600').opacity(1).step()
//x轴和y轴放大2倍，同时顺旋转45度
    // animation.scale(2,2).rotate(45).step()
//导出动画，就是让动画动起来
    this.animationData = animation.export()
//延时函数
 //    setTimeout(function() {
	// animation.backgroundColor('#ff6600').opacity(1).step()
 //      // animation.translate(30).step()
 //      this.animationData = animation.export()
 //    }.bind(this), 1000)
  },
}
</script>

如何想要点击后触发动画，可以在script增加函数methods，将动画复制过去就能实现。

更多详情可以看uni.createAnimation(OBJECT) | uni-app官网 (dcloud.net.cn)

下面是使用@keyframes

<template>
	<view class="">
	    <button @click="startAnimation">开始动画</button>
        <text :class="{ 'color-animation': animate }">这也是一个测试动画</text>
	</view>
</template>

<script>
export default{
  data() {
    return {
	  animate: false,
    }
  }，
 methods:{
	startAnimation() {
		this.animate = true;
	  },
  }
}

</script>

<style>
	.color-animation {
	  color: transparent;
//动画名 持续时间 动画样式（匀速） 延迟时间 最后帧的状态（保持最后样式）
	  animation: colorFade 3s linear 1s forwards;
	}
	
//动画名
	@keyframes colorFade {
//起始动画，可增加其他样式
	  from {
	    background-color: rgba(0, 0, 0, 0);
	  }
	  to {
	    background-color: rgba(255, 102, 0, 1);
	  }
	}
</style>