专栏首页算法与编程之美微信小程序|旋转动画效果

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

问题描述

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

效果图:

解决方案

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 团队


本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:吴怡辰

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python|计算公交发车时间

    公交车每天会按照一定间隔发车,由于不同时间段经过拥堵路段的用时不-样,所以给定路线下公交车每趟(每车次)行驶时间差异也很大,现在给出某路线某天各车次公交车离开始...

    算法与编程之美
  • Python|动态规划反推解决最低票价

    在一个火车旅行很受欢迎的国度,你提前一年计划了一些火车旅行。在接下来的一年里,你要旅行的日子将以一个名为days的数组给出。每一项是一个从 1 到 365 的整...

    算法与编程之美
  • Java|实现冒泡排序

    冒泡排序是一种简单的常见的排序算法,算法重复的走访排序的数组,通过不断的两两比较,最终把最大数浮于上方,好比是可乐的气泡冒泡的过程,所以生动的称之为“冒泡排序”...

    算法与编程之美
  • PowerBI公式-VAR

    VAR是单词Variables的缩写,即变量。Rob Collie把它比作录音机,这个比喻非常形象,录制好某一段落,再使用,而且是像复读机一样可以重复多次的播放...

    公众号PowerBI大师
  • CSS3动画的使用

    ``语法:animation: name duration timing-function delay iteration-count direction fi...

    小小咸鱼YwY
  • 八篇 ICCV 2019 最新图神经网络、CV相关论文

    为了带大家抢先领略高质量论文,小编特意整理了八篇ICCV 2019最新GNN相关论文,并附上arXiv论文链接供参考——点云结合、姿态估计、行为定位、视觉传感、...

    新智元
  • 经典面试题-Java中,String和StringBuffer的区别?

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    cwl_java
  • 转:String,StringBuffer与StringBuilder的区别??

    String 字符串常量 StringBuffer 字符串变量(线程安全) StringBuilder 字符串变量(非线程安全)  简要的说, String 类...

    Dar_Alpha
  • 人工智能/数据科学比赛汇总 2019.4

    Now - April 11, 2019 // Host by ISBI 2019 & Grand Challenges & CodaLab // ...

    ApacheCN_飞龙
  • react-native手势和视图

    IT故事会

扫码关注云+社区

领取腾讯云代金券