用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

旋转动画效果

Rolan 2020-5-9 00:11

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


问题描述

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

效果图:

解决方案

1  wxml:

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

<view>

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

</view>

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

2  js:

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

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

     })

  }

})



结语

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


鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 吴怡辰 来自: 算法与编程之美