2 Star 9 Fork 2

hcoder / Grace Animation Library

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or Download
api-animate.vue 2.34 KB
Copy Edit Web IDE Raw Blame History
hcoder authored 2021-04-09 12:25 . 20210409
<template>
<view>
<gal-animate-bg>
<view class="banner-title-main">
<view style="padding:150rpx 0;">
<gal-api-animate
@onMounted="onMounted"
ref="apiAnimateDemo">
<text class="gal-h5 gal-block-text gal-text-center gal-color-white">www.GraceUI.com </text>
</gal-api-animate>
</view>
</view>
</gal-animate-bg>
<view class="gal-body gal-margin-top">
<view style="height:50rpx;"></view>
<view
class="gal-flex gal-rows gal-nowrap gal-justify-content-center gal-align-items-center"
hover-class="gal-tap">
<gal-api-animate
@onMounted="onMounted2"
ref="buttonRef">
<text class="gal-color-gray gal-text gal-icons"
@tap="playMore">点击这里播放动画序列</text>
</gal-api-animate>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
interValId : null
}
},
methods: {
onMounted : function () {
console.log('动画组件已经准备好...');
this.$refs.apiAnimateDemo.setData({duration:1000, timingFunction: 'ease'});
this.$refs.apiAnimateDemo.animation.scale(1.5,1.5).step();
this.$refs.apiAnimateDemo.play();
},
playMore : function () {
// 01. 旋转 180
this.$refs.apiAnimateDemo.animation.rotate(180).step();
this.$refs.apiAnimateDemo.play();
setTimeout(()=>{
// 02. 再旋转 180
this.$refs.apiAnimateDemo.animation.rotate(360).step();
this.$refs.apiAnimateDemo.play();
}, 600);
// 透明度变化
setTimeout(()=>{
// 03. 透明度 0
this.$refs.apiAnimateDemo.animation.opacity(0).step();
this.$refs.apiAnimateDemo.play();
}, 1200);
setTimeout(()=>{
// 03. 透明度 0
this.$refs.apiAnimateDemo.animation.opacity(1).step();
this.$refs.apiAnimateDemo.play();
}, 1800);
},
onMounted2 : function(){
// 循环执行按钮闪烁动画
this.interValId = setInterval(()=>{
this.$refs.buttonRef.setData({duration:300, timingFunction: 'ease'});
this.$refs.buttonRef.animation.opacity(0).scale(0.8, 0.8).step();
this.$refs.buttonRef.play();
setTimeout(()=>{
this.$refs.buttonRef.animation.opacity(1).scale(1, 1).step();
this.$refs.buttonRef.play();
},300);
},2000);
}
},
// 页面卸载时注销循环动画
onUnload:function(){
console.log('onUnload');
clearInterval(this.interValId);
}
}
</script>
<style>
</style>

Comment ( 0 )

Sign in to post a comment

1
https://gitee.com/hcoder2016/grace-animation-library.git
git@gitee.com:hcoder2016/grace-animation-library.git
hcoder2016
grace-animation-library
Grace Animation Library
master

Search