微信小程序 Animation实现图片旋转动画示例

2024-02-08 01:11:12

最近小程序中有一个图片旋转的需求，最初是想着通过切换多张图片达到旋转的效果，后来发现微信小程序带有动画api，然后就改由image+Animation来实现。

首先在wxml中定义image

<image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image>

注意其中的animation属性，image就由它来实现动画。

而{{animation}}我们在js的data中定义

data: {
  animation: ''
},

改变animation的值（官网提供角度范围是-180~180，但是我发现角度越大会一直旋转）

   onShow: function() {
    console.log('index---------onShow()')
     this.animation = wx.createAnimation({
     duration: 1400,
     timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
     delay: 0,
     transformOrigin: '50% 50% 0',
     success: function(res) {
      console.log("res")
     }
    })
   },
   rotateAni: function (n) {
    console.log("rotate=="+n)
    this.animation.rotate(180*(n)).step()
    this.setData({
     animation: this.animation.export()
    })
   },

相关代码

var _animation;
var _animationIndex
const _ANIMATION_TIME = 500;
pages {
...
 onShow: function () {
  _animation = wx.createAnimation({
   duration: _ANIMATION_TIME,
   timingFunction: 'linear', // "linear","ease","ease-in","ease-in-out","ease-out","step-start","step-end"
   delay: 0,
   transformOrigin: '50% 50% 0'
})
},

/**
 * 实现image旋转动画，每次旋转 120*n度
 */
 rotateAni: function (n) {
  _animation.rotate(120 * (n)).step()
this.setData({
   animation: _animation.export()
})
},

/**
 * 开始旋转
 */
 startAnimationInterval: function () {
var that = this;
  that.rotateAni(++_loadImagePathIndex); // 进行一次旋转
  _animationIntervalId = setInterval(function () {
   that.rotateAni(++_loadImagePathIndex);
}, _ANIMATION_TIME); // 没间隔_ANIMATION_TIME进行一次旋转
},

/**
 * 停止旋转
 */
 stopAnimationInterval: function () {
if (_animationIntervalId> 0) {
   clearInterval(_animationIntervalId);
   _animationIntervalId = 0;
}
},
}

微信自带的Animation可以实现一次动画，然后可以通过setInterval来达到不断旋转的目的，在使用时，控制startAnimationInterval和stopAnimationInterval即可。

注意：

这里为什么不直接给_animation.rotate(120 * (n)).step()设置一个足够大的值，原因有两点：

1、我们需要便利的控制开始和停止，

2、animation在小程序进入后台后，会持续运行，占用手机内存和cpu，而小程序依赖于微信，在iphone上会导致微信被终止运行

在使用animation时，会发现有时候出现旋转速度很快或者反向旋转再正向旋转的清空，这都是由于rotate的值设置有问题。

1、rotate的值应该是上一次结束时的值，
2、如果设置了全局变量，记得在oncreate时初始化，不然第二次打开同一页面会有问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

小程序图片剪裁加旋转的示例代码

一个微信小程序图片剪裁组件,可以通过手势控制旋转缩放移动,也可以点击旋转进行90度旋转,先看下效果(视屏不知道为啥用不了,上个压缩过度的GIF先): 图片剪裁毫无疑问用的是canvas,但是开发过小程序的同学应该了解小程序canvas的一些坑.比如小程序canvas的设定了画布的大小后不能像web的canvas那样通过css样式来调整画布在手机上显示的大小.还有canvas不能设置太大因为可能会在某些安卓机上导致小程序崩溃.canvas绘制过大的图片会让小程序变得非常卡顿等等. 网上能找到的图片
微信小程序实现图片翻转效果的实例代码

老规矩,先上图: 页面: <view class='rotateCtn' bindtap='rotateFn'>  <view class='frame {{class1}}'> <image src="{{vo.cover1}}"></image> </view>  <view class='frame {{class2}}'> <im
小程序点击图片实现png转jpg

这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下页面数据初始化添加参数:isSignCanvassShow<br><br>//通过canvas将图片转为jpg,使图片生成白色底便于查看预览 //list为原图片数组列表,index表示当前图片下标, //imgList表示已经通过canvas转化的图片列表 trasformImgType(list,index,imgList){ t
详解微信小程序图片地扯转base64解决方案

你还在找在小程序成如何将图片转base64存储起来并显示嘛,在这里呢,来瞧瞧. 使用方法 js文件 let $this = this; request({ url:'https://www.dounine.com/hello.jpg', method:'GET', responseType: 'arraybuffer', success:function(res){ let base64 = wx.arrayBufferToBase64(res); $this.data.userImageBas
微信小程序内拖动图片实现移动、放大、旋转的方法

屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actions clearActions 清空当前的存储绘图动作 wx.dra
微信小程序实现点击图片旋转180度并且弹出下拉列表

本文为大家分享了微信小程序实现图片旋转.下拉列表的具体代码,供大家参考,具体内容如下正文: 先上效果图: index.wxml <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png"
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
微信小程序 Animation实现图片旋转动画示例

最近小程序中有一个图片旋转的需求,最初是想着通过切换多张图片达到旋转的效果,后来发现微信小程序带有动画api,然后就改由image+Animation来实现. 首先在wxml中定义image <image class="bth_image2" mode="aspectFit" animation="{{animation}}" src='../../images/***.png'></image> 注意其中的animati
微信小程序实现的图片保存功能示例

本文实例讲述了微信小程序实现的图片保存功能.分享给大家供大家参考,具体如下: 微信小程序保存图片分为两步: 1.下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径. 即:调用函数wx.downloadFile({}) 2.保存图片到系统相册. 即:调用函数wx.saveImageToPhotosAlbum({}) 具体代码如下: .wxml <button data-image='{{图片路径}}' bindtap="saveImage" &g
微信小程序实现裁剪图片大小

本文实例为大家分享了微信小程序实现裁剪图片大小的具体代码,供大家参考,具体内容如下效果图 .wxml <button bindtap="uploadtap">上传图片</button> <image style="width: 100%;" mode="widthFix" src="{{canfile_image}}"></image> <canvas canvas-id
微信小程序音频录制波纹循环动画

本文实例为大家分享了微信小程序音频录制波纹循环动画的具体代码,供大家参考,具体内容如下实现的效果第一种方法(利用微信小程序的animation) wxml部分  <view class="myRecode"> <view class="recode" bindtouchstart='recodeClick' bindtouchend='recodeEnd'&g
微信小程序 chooseImage选择图片或者拍照

微信小程序 chooseImage选择图片或者拍照一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'
微信小程序loading组件显示载入动画用法示例【附源码下载】

本文实例讲述了微信小程序loading组件显示载入动画用法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <loading hidden="{{loadingHidden}}"> 加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button> ② index
微信小程序动态设置图片大小的方法

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src 图片资源地址 2.mode 图片裁剪.缩放的模式 3.binderror 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height
微信小程序之裁剪图片成圆形的实现代码

前言最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件可移动的视图容器,在页面中可以拖拽滑动会有好多个属性,在这里不一一介绍,只说我们能

微信小程序 Animation实现图片旋转动画示例

相关推荐

随机推荐