uniapp 点击动画_如何在uni-app 中使用动画-animation

如何在uni-app 中使用动画-animation

1.dom元素中添加:animation="animationData"

:animation="animationData">

2.js中相应添加

export default {

data() {

return {

pageY: 0, //触摸点

offsetTop: 0, //偏移量

newTop: 200,

show: false,

animationData: {},

off: false

};

},

onLoad() {},

onShow() {

// 初始化一个动画

var animation = uni.createAnimation({

transformOrigin: "ease-in",

duration: 100, //动画持续1秒

// timingFunction: 'linear', //linear 全程匀速运动

// delay:300 //延迟两秒执行动画

})

this.animation = animation

},

methods: {

touchendTest() {

// console.log('开始回弹动画');

this.newTop = 200;

this.scaleAndScale()

},

touchstartTest(e) {

// console.log('点击触发动作');

this.newTop = 200;

this.pageY = e.changedTouches[0].pageY * 2;

},

touchmoveTest(e) {

// console.log('开始移动');

if (e.changedTouches[0].pageY * 2 - this.pageY < 200) {

this.newTop = 200;

return;

}

this.newTop = e.changedTouches[0].pageY * 2 - this.pageY;

if (this.newTop > 500) {

this.newTop = 500;

return;

}

},

scaleAndScale() {

if (this.off) {

// 使用动画

this.rotateAndScale()

} else {

this.norotateAndScale()

}

this.off = !this.off

},

rotateAndScale() {

// 定义动画内容 偏移

this.animation.translateY(-20).step()

this.animation.translateY(10).step()

this.animation.translateY(-5).step()

this.animation.translateY(0).step()

// 导出动画数据传递给data层

this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画

},

norotateAndScale() {

this.animation.translateY(-22).step()

this.animation.translateY(12).step()

this.animation.translateY(-7).step()

this.animation.translateY(0).step()

// 导出动画数据传递给data层

this.animationData = this.animation.export(); //每次执行导出动画时 会覆盖之前的动画

}

}

};

.content {

position: relative;

}

.test1 {

width: 750rpx;

height: 400rpx;

background-color: #007aff;

}

.test2 {

width: 750rpx;

height: 1900rpx;

background-color: #4cd964;

z-index: 20;

position: absolute;

}

.test3 {

margin-top: 500rpx;

width: 200rpx;

height: 200rpx;

background-color: #333;

animation: bounceInUp;

}

注：uniapp 运行在手机版本中会出现问题，相同动画只能运行一次