animation动画实例

<template>
	<view>
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="animation-element-wrapper">
				<view class="animation-element" :animation="animationData"></view>
			</view>
			<scroll-view class="animation-buttons" scroll-y="true">
				<button class="animation-button" @tap="rotate">旋转</button>
				<button class="animation-button" @tap="scale">缩放</button>
				<button class="animation-button" @tap="translate">移动</button>
				<button class="animation-button" @tap="skew">倾斜</button>
				<button class="animation-button" @tap="rotateAndScale">旋转并缩放</button>
				<button class="animation-button" @tap="rotateThenScale">旋转后缩放</button>
				<button class="animation-button" @tap="all">同时展示全部</button>
				<button class="animation-button" @tap="allInQueue">顺序展示全部</button>
				<button class="animation-button animation-button-reset" @tap="reset">还原</button>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				title: 'createAnimation',
				animationData: ''
			}
		},
		onUnload(){
			this.animationData = ''
		},
		onLoad() {
			this.animation = uni.createAnimation()
		},
		methods: {
			rotate: function () {
				this.animation.rotate(Math.random() * 720 - 360).step()
				this.animationData = this.animation.export()
			},
			scale: function () {
				this.animation.scale(Math.random() * 2).step()
				this.animationData = this.animation.export()
			},
			translate: function () {
				this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
				this.animationData = this.animation.export()
			},
			skew: function () {
				this.animation.skew(Math.random() * 90, Math.random() * 90).step()
				this.animationData = this.animation.export()
			},
			rotateAndScale: function () {
				this.animation.rotate(Math.random() * 720 - 360)
					.scale(Math.random() * 2)
					.step()
				this.animationData = this.animation.export()
			},
			rotateThenScale: function () {
				this.animation.rotate(Math.random() * 720 - 360).step()
					.scale(Math.random() * 2).step()
				this.animationData = this.animation.export()
			},
			all: function () {
				this.animation.rotate(Math.random() * 720 - 360)
					.scale(Math.random() * 2)
					.translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
					.skew(Math.random() * 90, Math.random() * 90)
					.step()
				this.animationData = this.animation.export()
			},
			allInQueue: function () {
				this.animation.rotate(Math.random() * 720 - 360).step()
					.scale(Math.random() * 2).step()
					.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
					.skew(Math.random() * 90, Math.random() * 90).step()
				this.animationData = this.animation.export()
			},
			reset: function () {
				this.animation.rotate(0, 0)
					.scale(1)
					.translate(0, 0)
					.skew(0, 0)
					.step({
						duration: 0
					})
				this.animationData = this.animation.export()
			}
		}
	}
</script>

<style>
	.animation-element-wrapper {
		display: flex;
		width: 100%;
		padding-top: 150upx;
		padding-bottom: 150upx;
		justify-content: center;
		overflow: hidden;
		background-color: #ffffff;
	}

	.animation-element {
		width: 200upx;
		height: 200upx;
		background-color: #1AAD19;
	}

	.animation-buttons {
		padding:30upx 0;
		width: 100%;
		height: 360upx;
	}

	.animation-button {
		float: left;
		line-height: 2;
		width: 44%;
		margin: 15upx 3%;
	}

	.animation-button-reset {
		width: 94%;
	}
</style>

uni.createAnimation(OBJECT)

创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

var animation = uni.createAnimation({

    transformOrigin: "50% 50%",

   duration: 1000,

   timingFunction: "ease",

    delay: 0

})

 

 示例：

export default{
  data: {
    animationData: {}
  },
  onShow: function(){
    var animation = uni.createAnimation({
      duration: 1000,
        timingFunction: 'ease',
    })

    this.animation = animation

    animation.scale(2,2).rotate(45).step()

    this.animationData = animation.export()

    setTimeout(function() {
      animation.translate(30).step()
      this.animationData = animation.export()
    }.bind(this), 1000)
  },
  methods:{
    rotateAndScale: function () {
      // 旋转同时放大
      this.animation.rotate(45).scale(2, 2).step()
      this.animationData = this.animation.export()
    },
    rotateThenScale: function () {
      // 先旋转后放大
      this.animation.rotate(45).step()
      this.animation.scale(2, 2).step()
      this.animationData = this.animation.export()
    },
    rotateAndScaleThenTranslate: function () {
      // 先旋转同时放大，然后平移
      this.animation.rotate(45).scale(2, 2).step()
      this.animation.translate(100, 100).step({ duration: 1000 })
      this.animationData = this.animation.export()
    }
  }
}