transfromjs动画效果
记得以前facebook做过一款HTML5游戏。开场动画是一块软体类似豆腐的东西一起摇摆。类似的效果如下面的gif所示:
facebook当时使用的是createjs下的子项目easeljs和tweenjs去制作,基于Canvas的动画。基本的原理主要是:循环运动Canvas抽象的DisplayObject的skewX和scaleY来实现软体摇摆。
目前来看transformjs也能做到,因为transformjs也能运动skewX和scaleY。先来看看facebook的方式。
tweenjs + transformjs
注意这里的tweenjs是createjs下的子项目,而不是github上的tween.js项目。
var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;
var Tween = createjs.Tween,
sineInOutEase = createjs.Ease.sineInOut;
Tween.get(element, {loop: true}).to({scaleY: .8}, 450, sineInOutEase).to({scaleY: 1}, 450, sineInOutEase);
Tween.get(element, {loop: true}).to({skewX: 20}, 900, sineInOutEase).to({skewX: -20}, 900, sineInOutEase);
在线演示地址: http://alloyteam.github.io/AlloyTouch/transformjs/example/soft2.html
上面的代码很精简。这里稍微解释下:
- 元素的初始skewX是-20,为了和scale的步调一致
- 元素的originY是100,为的以企鹅的bottom center为基准点
可以看到,由于transformjs高度抽象,可以和tweenjs轻松搭配使用,没有任何压力。
AlloyFlow + transformjs
可能上面的代码不是很明白具体实现的流程?说实话,第一次看到上面的代码也没有一下看清晰流程。那么就使用AlloyFlow分解工作流的方式去实现同样的效果。
var element = document.querySelector("#test");
Transform(element);
element.originY = 100;
element.skewX = -20;
function sineInOut(a) {
return 0.5 * (1 - Math.cos(Math.PI * a));
}
var alloyFlow = new AlloyFlow({
workflow: [
{
work: function () {
To.go(element, "scaleY", .8, 450, sineInOut);
To.go(element, "skewX", 20, 900, sineInOut)
},
start: 0
}, {
work: function () {
To.go(element, "scaleY", 1, 450, sineInOut)
},
start: 450
}, {
work: function () {
To.go(element, "scaleY", .8, 450, sineInOut);
To.go(element, "skewX", -20, 900, sineInOut)
},
start: 900
}, {
work: function () {
To.go(element, "scaleY", 1, 450, sineInOut);
},
start: 1350
}, {
work: function () {
this.start();
},
start: 1800
}
]
}).start();
在线演示地址: http://alloyteam.github.io/AlloyTouch/transformjs/example/soft.html
可以看到上面的workflow里面有一堆work按照start的时间依次序执行,最后在1800ms的时候调用this.start()会回到起点重新开始运行。还需要解释一下为什么选择sineInOut的easing。可以来看看其缓动图像:
sineInOut速率是先慢后快再慢,刚好符合软体自身约束作用力的模拟。
那么,AlloyFlow是何方神器?且听下回单独开篇分解。
开始transformjs之旅
有很多童鞋问,transformjs还能做什么酷炫特效?怎么在官网看到的都是简单的效果?
其实transformjs他只是提供了基础的transformation能力,不与时间、和运动库耦合。可以和任意时间运动库配合使用。所以怎么酷炫完全靠大家创意和想象力,搭配transformjs使用就对了。
transformjs会计算出matrix3d赋给dom的 transform msTransform OTransform MozTransform webkitTransform,保证硬件加速和兼容性的同时,不丢失可编程性,点个赞....
主页:http://alloyteam.github.io/AlloyTouch/transformjs/
Github :https://github.com/AlloyTeam/AlloyTouch/tree/master/transformjs
transfromjs动画效果的更多相关文章
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
- Android动画效果之自定义ViewGroup添加布局动画
前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...
- Android动画效果之Property Animation进阶(属性动画)
前言: 前面初步认识了Android的Property Animation(属性动画)Android动画效果之初识Property Animation(属性动画)(三),并且利用属性动画简单了补间动画 ...
- Android动画效果之初识Property Animation(属性动画)
前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...
- Android动画效果之Frame Animation(逐帧动画)
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- Android动画效果之Tween Animation(补间动画)
前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation ...
- CSS3中的动画效果记录
今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- iOS之按钮出现时加一个动画效果
//按钮出现时的动画效果 + (void)buttonAnimation:(UIButton *)sender { CAKeyframeAnimation *animation = [CAKeyfra ...
随机推荐
- PHP 返回13位时间戳
13位时间戳生成函数如下所示: private function getMillisecond() { list($t1, $t2) = explode(' ', microtime()); retu ...
- 返回值优化(RVO)
C++的函数中,如果返回值是一个对象,那么理论上它不可避免的会调用对象的构造函数和析构函数,从而导致一定的效率损耗.如下函数所示: A test() { A a; return a; } 在test函 ...
- 如何通过JavaScript构建Asp.net服务端控件
摘要 虽然ASP.NET的服务器控件一直被大家所诟病,但是用户控件(ACSX)在某些场景下还是非常有用的. 在一些极特珠的情况下,我们会使用JavaScript动态的构建页面中的控件,但假设遇到了我要 ...
- Business Unit Lookup in Form
Just add the below code in lookup() of StringEdit control in Form to get the Business Unit Lookup: p ...
- servlet filter和springMVC拦截器的区别
参考 http://blog.csdn.net/ggibenben1314/article/details/45341855
- system verilog的一些总结(从其他博客复制来的)
转载自 http://blog.sina.com.cn/s/blog_e7fec2630101f5t9.html SystemVerilog是一种硬件描述和验证语言(HDVL),它基于IEEE 136 ...
- HEVC学习之一编码框架
接触H265时间不是很长,看了一些东西,但是一直没有时间静下心来整理.H265的学习主要是参考万帅.杨付正的<新一代高效视频编码 H265/HEVC 原理.标准与实现>移书,这本书对H26 ...
- logging 日志模块学习
logging 日志模块,用于记录系统在运行过程中的一些关键信息,以便于对系统的运行状况进行跟踪,所以还是灰常重要滴,下面我就来从入门到放弃的系统学习一下日志既可以在屏幕上显示,又可以在文件中体现. ...
- Java反射机制DOME
Java反射机制 public class TestHibernate { @Test public void TestHb(){ try { Class cs = Class.forName(&qu ...
- JS-安全检测JavaScript基本数据类型和内置对象的方法
前言:在前端开发中经常会需要用到检测变量数据类型的需求,比如:判断一个变量是否为undefined或者null来进行下一步的操作,今天在阅读“编写高质量代码-改善JavaScript程序的188个建议 ...