【开源】小程序、小游戏和Web运动引擎 to2to 发布
简单轻量跨平台的 Javascript 运动引擎
- Github → https://github.com/dntzhang/cax/tree/master/packages/to
- Simple DEMO
- Animation DEMO
- Clip Transform Animation DEMO
- Animate DEMO
- Swing DEMO
to2to 中文念 '兔兔兔',作为 cax 内置的运动套件独立出一个package ,因为它本身可以和平台环境运动对象无关。既可运动 dom,也可运动 cax 内置对象,也可运动对象子面量。众所周知,运动需要循环的 tick 去不断执行偏移函数,小程序,小游戏和web各浏览器的 相应的 API 还是有差异,to2to 抹平了这些差异,让你使用同样的api可以在不同环境畅快运动。
特性
- 超轻量级的代码体积
- 支持周期运动
- 支持并行与串行运动
- 运动一切(Canvas、DOM、WebGL、SVG、Object..)
- 支持小程序、小游戏以及 Web 浏览器用相同简介的 API 运动
一分钟入门 to2to 使用
通过 npm 安装或者 cdn 下载下来在 HTML 引用该脚本:
npm i to2to
使用:
import To from 'to2to'
const ele = document.querySelector('#animateEle')
To.get({ rotate: 0, x: 0, y: 0 })
.to({ rotate: 720, x: 200, y: 200 }, 1600, To.easing.elasticInOut)
.progress(function () {
ele.style.transform = `translate(${this.x}px, ${this.y}px) rotate(${this.rotate}deg)`
})
.start()
在 cax 中使用 to2to
cax 内置了 to 的能力以连缀的方式写运动效果:
const easing = cax.To.easing.elasticInOut
cax.To.get(bitmap)
.to({ y: 340, rotation: 240 }, 2000, easing)
.begin(() => {
console.log("Task one has began!")
})
.progress(() => {
console.log("Task one is progressing!")
})
.end(() => {
console.log("Task one has completed!")
})
.wait(500)
.to()
.rotation(0, 1400, easing)
.begin(() => {
console.log("Task two has began!")
})
.progress(() => {
console.log("Task two is progressing!")
})
.end(() => {
console.log("Task two has completed!")
})
.start();
to
和to
之间的是并行to
和wait
之前的是串行to
和to
之间的 与 下一个to
和to
之间的是串行
有点绕,但是很直观,慢慢体会。
如果想要循环播放的话可以使用 cycle
方法:
cax.To.get(bitmap)
.to()
.y(340, 2000, cax.easing.elasticInOut)
.to
.y(0, 2000, cax.easing.elasticInOut)
.cycle()
.start()
自定义动画
通过 animate
方法可以使用自定义的动画:
const stage = new cax.Stage(300, 400, 'body')
const bitmap = new cax.Bitmap('./wepay-diy.jpg', function () {
var eio = To.easing.elasticInOut
To.get(bitmap).animate('rubber').start()
})
bitmap.x = 150
bitmap.y = 200
bitmap.originX = 40
bitmap.originY = 40
stage.add(bitmap)
cax.setInterval(() => {
stage.update()
}, 16)
to2to 内置了少数几个自定义动画
- rubber
- bounceIn
- flipInX
- zoomOut
扩展自定义动画
内置的不够用?自己动手丰衣足食:
比如 customAnimation
就是通过下面实现的:
To.extend('customAnimation', [['to', ['scaleX', {
'0': 0,
'1': 400,
'2': To.easing.elasticInOut
}], ['scaleY', {
'0': 0,
'1': 400
}]]])
索引为 2 的 easing 可以传可不传,不传代表线性匀速变化。
使用刚刚定义的自定义动画:
To.get(obj).animate('customAnimation').start()
谁在使用?
License
MIT
【开源】小程序、小游戏和Web运动引擎 to2to 发布的更多相关文章
- 【小程序+ thinkphp5】 获取微信运动数据
配置.请参看上篇文章.这里直接上代码 PHP 代码: //获取微信运动数据: public function test(){ $code = input("code"); $sig ...
- 微信小程序(小游戏)后台开发
小程序开放接口功能,目的是方便小程序接入第三方服务器,比如,商城类小程序,小游戏,需要保存订单数据,玩家信息等.那就需要服务器和数据库, 开发者对于各方关系必须要理清,那就是小程序,用户,开发者服务器 ...
- 微信小程序--骰子游戏
寒假老师让制作一个小程序,于是开始学习如何制作微信小程序. 第一步,拥有一个小程序帐号, 在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作. 我用的是微信web开发工具 ...
- 微信小程序小Demo
微信小程序小Demo 调用API,轮播图,排行榜,底部BabTar的使用... board // board/board.js Page({ /** * 页面的初始数据 */ // 可以是网络路径图片 ...
- 开源小程序CMS网站, JeeWx-App-CMS 1.1 版本升级发布,持续更新!
JeeWx-App-CMS开源小程序CMS网站,持续更新ing~ JeeWx-App-CMS 是jeewx开发的小程序网站开源项目,基于小程序wepy语言,具备cms网站的基本功能,能够打造简单易用的 ...
- 【零售小程序】—— webview嵌套web端项目(原生开发支付功能)
index → index.wxml 套webwiew // url 活动url bindmessage 接收信息 <web-view src='{{url}}' bindmessage='m ...
- 微信小程序|小游戏
[官]小游戏开发 https://developers.weixin.qq.com/minigame/dev/index.html 官网 https://mp.weixin.qq.com 做了4个微信 ...
- 【微信小程序】实现类似WEB端【返回顶部】功能
1.原理:利用小程序自带的<scroll-view>组件,该组件的bindScroll和scroll-top方法.属性进行联合操作 2.效果图: 3.wxml: <scroll-vi ...
- 微信小程序小技巧系列《二》show内容展示,上传文件编码问题
作者:gou-tian 来自:github show内容展示 尝试用微信小程序的template组件实现.同时,尝试页面间转跳时传参,在目标页面引入模板文件实现 写的更少,做的更多 篇幅有限详细代码此 ...
随机推荐
- 关于iframe跨域实践
提要 项目中与到iframe子页面中需要通过top获取在父页面中的全局变量的需求,由于App部署的缘故,导致父页面和iframe子页面分别在不同的端口下,导致iframe跨域现象,通过查阅资料进行问题 ...
- 跨域调用接口的方法之一:$.ajaxSetup()
跨域查询接口的数据,之前在公司时有发生过,产生的原因是,本地请求的域名或IP地址不一致,解除方法,也是修改域名和IP地址.比如: 接口中的数据来自IP地址:192.168.1.23/get.php 如 ...
- Apache Windows下Apache安装步骤
1.apache官网下载Apache HTTP Server服务器 我相信有些朋友刚用apache服务器时,都希望从官网上下载,而面对着官网上众多的项目和镜像以及目录,也许有点茫然.下面是具体步骤: ...
- SQL Server中通用数据库角色权限处理
SQL Server中通用数据库角色权限处理 最近和同事在做数据库权限清理的事情,主要是删除一些账号:取消一些账号的较大的权限等,例如,有一些有db_owner权限,我们取消账号的数据库角色db_ ...
- JS实现定时器
导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...
- 注入攻击(SQL注入防御)
正确的防御SQL注入 sql注入的防御不是简单只做一些用户输入的escape处理,这样是不够的,只是提高了攻击者的门槛而已,还是不够安全. 例如 mysql_real_escape_string()函 ...
- LeetCode算法题-Balanced Binary Tree(Java实现)
这是悦乐书的第167次更新,第169篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第26题(顺位题号是110).给定二叉树,判断它是否是高度平衡的.对于此问题,高度平衡二 ...
- 记录参加QCon2017北京站的心得
如有侵权,请告知作者删除.scottzg@126.com 很荣幸参加QCon全球软件开发大会,这里特别感谢我们部门的总经理,也是<互联网广告算法和系统实践>此书的作者王勇睿.因为他我才有这 ...
- 【Teradata】日期类型转换
1.字符串与日期间转换 date '2007-05-10' cast( (curent_timestamp() (format )) //结果为20180615164201 2.毫秒转换为时间戳 / ...
- 早期nginx tcp代理(基于patch实现)
nginx tcp代理功能由nginx_tcp_proxy_module模块提供,同时监测后端主机状态.该模块包括的模块有: ngx_tcp_module, ngx_tcp_core_module, ...