微信公众号开发

微信小程序|旋转动画效果

本文主要是介绍微信小程序|旋转动画效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题描述

在小程序中,如果可以用一个动画效果展现一句话或一段文字,会比普通文字呈现更具吸引力,这不仅是体现更多样的文字效果,更是突出这段文字的一个方法。那么接下来就来看一下如何实现一个文字旋转的动画效果吧。

效果图:

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

解决方案

1  wxml:

这部分很容易实现,只需要设置一个点击旋转标签button以及对一条需要旋转的文字进行数据绑定即可。

<view>

   <view animation="{{animation}}">我在做动画</view>

</view>

<button type="primary"  bindtap="rotate">旋转</button>

2  js:

js中需要先了解一个animation的api,其中的参数和方法如下:

(1)duration: 动画持续多少毫秒。

(2)timingFunction:“运动”的方式,本例中的“linear”代表动画以匀速的效果来呈现。

(3)delay:多久后动画开始运行,也就是动画延迟开始的时间translate(100,-100)向X轴移动100的同时向Y轴移动-100。

(4)step():一组动画完成,例如想让本例中的文字旋转,用this.animation.rotate(360).step(),其中360就表示旋转一周360°。

代码如下:

Page({

   data: {

     text: "Page animation",

     animation: ''

   },

   onLoad: function (options) {

   },

   onReady: function () {

     //实例化一个动画

     this.animation = wx.createAnimation({

       // 动画持续时间,单位ms,默认值 400

       duration: 1500,

       timingFunction: 'linear',

       // 延迟多长时间开始

       delay: 100,

       transformOrigin: 'left top 0',

       success: function (res) {

         console.log(res)

       }

     })

   },

   //旋转

   rotate: function () {

     //顺时针旋转10度

     this.animation.rotate(360).step()

     this.setData({

       //输出动画

       animation: this.animation.export()

     })

  }

})

结语

文字的动画效果远不止这一种,它可以实现很多样很丰富的形式,本篇只是一个基础的动画效果演示,后续将介绍更丰富的动画效果,欢迎持续关注。

END

编  辑   |   王楠岚

责  编   |   吴怡辰

 where2go 团队


           

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

这篇关于微信小程序|旋转动画效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!