小程序实现旋转动画效果

最新推荐文章于 2024-05-22 11:21:10 发布

MichstaBe Stars

最新推荐文章于 2024-05-22 11:21:10 发布

阅读量692

点赞数

分类专栏：原生小程序文章标签：动画小程序微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_47085255/article/details/121293288

版权

原生小程序专栏收录该内容

2 篇文章

订阅专栏

wxml

<view id="container" class="circle" animation="{{animationData}}">
  <text class="block">test</text>
</view>

wxss

.circle {
  width: 100rpx;
  line-height: 100rpx;
  text-align: center;
  border-radius: 50%;
  background-color: #FF0000;
}

const app = getApp()

Page({
  data: {
    animationData: {}
  },

  onLoad() {
    this.rotateAnimate()
  },

  onHide() {
    this.clearAnimation('#container')
  },

  rotateAnimate() {
    this.animate('#container', [
      { rotate: 0 },
      { rotate: 90 },
      { rotate: 180 },
      { rotate: 270 },
      { rotate: 360 }
    ], 5000, () => {
      this.rotateAnimate()
    })
  }
})