效果和文件结构

<!-- index.wxml -->
<view><image src="../images/l.png" style="width:300px; height: 300px" animation='{{anim}}' catchtouchstart="start" catchtouchmove="move" catchtouchend="end"></image>
</view>

// judge.js
//判断坐标系内顺时针还是逆时针
function judgeturn(x1, y1, x3, y3) {var x2 = 150var y2 = 150if ((x2 - x1) * (y3 - y2) - (y2 - y1) * (x3 - x2) > 0)return false else  return true
}
module.exports = {judgeturn: judgeturn
}

// index.js
var animation
var angle = 0
var x1, y1, x3, y3
//引入js
var util = require('judge.js')
Page({//创建动画onShow: function() {animation = wx.createAnimation({duration: 500,timingFunction: 'ease',})},//滑动开始start: function(e) {x1 = e.touches[0].clientXy1 = e.touches[0].clientY},//滑动结束end: function(e) {var that = thisx3 = e.changedTouches[0].clientXy3 = e.changedTouches[0].clientYif (util.judgeturn(x1, y1, x3, y3)) {angle = angle + 35animation.rotate(angle).step()that.setData({anim: animation.export()})} else {angle = angle - 35animation.rotate(angle).step()that.setData({anim: animation.export()})}},
})

wx.createAnimation官方文档

touches
touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。表示当前停留在屏幕上的触摸点。

Touch 对象

属性	类型	说明
identifier	Number	触摸点的标识符
pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

# Animation Animation.rotate(number angle)

从原点顺时针旋转一个角度

# 参数

# number angle

旋转的角度。范围 [-180, 180]

Animation.step(Object object)官方文档

Array. Animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作。

返回值
Array.
animationData

微信小程序——风水罗盘相关推荐

微信小程序快速开发：视频指导版
<微信小程序快速开发:视频指导版>是2017年5月由人民邮电出版社出版的图书,作者是易伟.本书根据微信小程序的内容,全面系统地介绍了微信小程序的搭建和开发.本书主要内容有小程序注册.编程基 ...
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享...
?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? iKcamp官网:http://www.ikcamp.com 访问官网更快阅读全部免费分享课程:<iKcamp出品|全网最新|微信小程 ...
微信和html5的使用感觉,微信小程序和HTML5相比有何不同呢?
小程序和H5有哪些不同?自从小程序面世以来,大家一直将小程序与HTML5来进行对比,大家对小程序也一直褒贬不一,很多人都觉得HTML5(下文简称H5)比较方便,毕竟小程序只能在微信中使用,而H5可以在 ...
【微信小程序宝典】从零开始做微信小程序开发
开发前必读简要基于大量无效开发,无法上线的案例,所以开发前部分知识十分重要:| 链接微信小程序个人注册简单步骤打开mp.weixin.qq.com,点击右上角立即注册,进入小程序注册| 链接微 ...
微信小程序-预研总结（PPT分享）
该PPT适合产品.运营.设计.重构.开发同学了解探讨. 备注: 第一:目前我们的团队,从产品.设计.重构.开发都没有很好的小程序项目经验. 第二:接下来的产品规划中,有多个产品比如WeGame APP ...
1万字！彻底看懂微信小程序
Q:为什么说小程序如炮友? A:小程序刚发布不久就流行一个段子:APP如原配,一年不用几次:服务号如情人,一个月固定几次:订阅号如酒店小卡片,天天可以卖广告:小程序像炮友,用完就走. 资本如嫖客,各个 ...
通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
微信小程序开发语言的选择
微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...
微信小程序入门-指南针
微信小程序提供了众多的原生API接口,利用罗盘接口,做了个简单的指南针小程序,搜索小程序[X的实验室]可看效果. 实现方案利用罗盘接口返回的[数据],转化为指南针偏移量[度数],利用CSS3 tra ...
关于「微信小程序」背后的故事
前天晚上,小编的朋友圈被一则消息刷屏. 微信要推出应用号,我们暂且叫它小程序. 2021年年初张小龙在微信公开课上的的只言片语引发了大家对Web应用的无限憧憬, 9月21日,它终于诞生了! 作为新媒体 ...

微信小程序——风水罗盘

效果和文件结构

# Animation Animation.rotate(number angle)

# 参数

# number angle

微信小程序——风水罗盘相关推荐

最新文章

热门文章