uniapp动画的爬坑之路---动画不生效

最新推荐文章于 2025-04-28 10:33:55 发布

木贝西

最新推荐文章于 2025-04-28 10:33:55 发布

阅读量6k

点赞数 2

分类专栏： uniapp

mubeixi

本文链接：https://blog.youkuaiyun.com/weixin_44872995/article/details/107607798

版权

uniapp 专栏收录该内容

11 篇文章

订阅专栏

本文介绍在uniapp中实现动画效果的具体方法，包括动画事件在view标签上的应用，以及通过scale、rotate和平移等动画操作的步骤。展示了如何使用createAnimation API创建动画实例，并通过step方法更新动画状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp官网案例
动画不生效，动画事件必须写在view标签上写在div无效

<view :animation="animationData" style="background:red;height:100rpx;width:100rpx"></view>

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()
    }
  }
}