本文目录一览：
- 1、js动画效果代码方法
- 2、如何使用Createjs来编写HTML5游戏TweenJS和Tick动画
- 3、如何使用Tween.js各类原生动画运动缓动算法
- 4、如何用Paper.js制作网页动画
- 5、threejs--模型动画线性控制
js动画效果代码方法
1.toggle():
toggle()方法除了模拟鼠标连续单击事件之外，同时会动态的隐藏改变当前元素的高度，宽度和不透明度，最终切换当前元素的可见状态。如果元素可见，则切换隐藏状态，如元素隐藏，切换可见状态
2.fadeln()与fadeOut();
这两个方法，实现了淡入和淡出的一个动画效果，fadeln（）渐显效果，fadeout（）渐隐效果，两者结合使用，可把元素隐藏在按钮中，在通过点击事件显示，两方法只改变元素的透明度，不修改其他属性
3.fadeToggle();
此方法会动态的改变当前元素的透明度，最终却换当前元素的可见状态。如果元素是可见的，则通过淡出效果切换隐藏；如果元素是隐藏的，则通过淡入效果切换可见状态，不设置参数时，默认0.4秒内发生淡入与淡出的动画效果
4.fadeTo() ;
fadeln()与fadeOut()方法都是渐隐渐显，透明度从1到0，从0到1实现一个渐隐渐显效果，而fadeToggle()方法则是可以控制1-0的透明度，为更好展示透明度的效果，可在页面中创造一个下拉框，用于保存透明度值，操作下拉框去控制图片透明度值
5.slideDown(); 与 slideUp() ;
slideDown()可改变元素高度，呈现一个滑动效果，由上往下滑动，直到显示最终的当前元素，slideUp（）相反，由下往上滑动，直到隐藏最终的当前元素
6.slideToggle();
slideToggle()方法跟slideDown(); 与 slideUp() ;两个方法有异曲同工之妙，同样可改变元素的高度，不同于slideDown(); 与 slideUp() ; 的效果， 这个方法是通过点击事情控制元素的隐藏和显示
7.animate() ;
这个方法是自定义动画效果的方法，高度，宽度，透明度，运行速度都是可通过自定义给属性，这个方法只能改变可以取数字值的css属性，如：大小，边框，内外边距，定位，字体，文本，背景，透明度。
8.stop() ;
停止动画，stop（）方法能结束当前的动画，并立即进入到下一个动画。
如何使用Createjs来编写HTML5游戏TweenJS和Tick动画
createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。
首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。
接下来开始分析代码：
首先引入js文件
script src="easeljs-0.7.1.min.js"/script
script src="preloadjs-0.4.1.min.js"/script
然后进行舞台初始化操作：
function init(){
stage = new createjs.Stage("cas");
C_W = stage.canvas.width;
C_H = stage.canvas.height;
var manifest = [
{src:"image/man.png" , id:"man"},
{src:"image/ground.png" , id:"ground"},
{src:"image/bg.png" , id:"bg"},
{src:"image/high.jpg" , id:"high"},
{src:"image/coins.png" , id:"coin"}
]
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete" , handleComplete);
loader.loadManifest(manifest);
drawLoading();
}
上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：
function handleComplete(){ //当图片素材load完后执行该方法
var manImage = loader.getResult("man"),
lowground = loader.getResult("ground"),
highground = loader.getResult("high"),
bgImage = loader.getResult("bg"),
coins = loader.getResult("coin");
sky = new createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0, 0, 1 , C_H/bgImage.height);
stage.addChild(sky);
man = createMan(200,326,manImage);
//该框为判定角色的判定区域
kuang = new createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
// stage.addChild(kuang);
mapHandle(lowground , highground , coins);
createjs.Ticker.timingMode = createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout
createjs.Ticker.setFPS(30);//舞台帧率控制
createjs.Ticker.addEventListener("tick", tick);//绑定舞台每一帧的逻辑发生函数
window.addEventListener("keydown" , function(event){
event = event||window.event;
if(event.keyCode===32man.jumpNumman.jumpMax){
man.jump();
}
})
}
获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。
然后进行舞台循环设置，上面有注释了，就不说了。
如何使用Tween.js各类原生动画运动缓动算法
使用缓动功能，您可以加快或放慢动画的开头或结尾速度，以获得更加逼真或更加令人愉悦的效果。该技术用于修改 Flash 计算补间中的属性关键帧之间的属性值的方式。如果不使用缓动，Flash 在计算这些值时，会使对值的更改在每一帧中都一样。如果使用缓动，则可以调整对每个值的更改程度，从而实现更自然、更复杂的动画。缓动是应用于补间属性值的数学曲线。补间的最终效果是补间和缓动曲线中属性值范围组合的结果。例如，在制作汽车经过舞台的动画时，如果让汽车从停止开始缓慢加速，然后在舞台的另一端缓慢停止，则动画会显得更逼真。如果不使用缓动，汽车将从停止立刻到全速，然后在舞台的另一端立刻停止。如果使用缓动，则可以对汽车应用一个补间动画，然后使该补间缓慢开始和停止。一个未应用缓动的运动路径。请注意帧沿路径的均匀分布。已应用“停止并启动（中）”缓动的同一运动路径。请注意路径末尾附近帧的浓度，产生更逼真的汽车加速和减速。可以在属性检查器或动画编辑器中应用缓动。在属性检查器中应用的缓动将影响补间中包括的所有属性。在动画编辑器中应用的缓动可以影响补间的单个属性、一组属性或所有属性。缓动可以简单，也可以复杂。Flash 包含一系列的预设缓动，适用于简单或复杂的效果。在动画编辑器中，还可以创建自己的自定义缓动曲线。缓动的常见用法之一是在舞台上编辑运动路径并启用浮动关键帧以使每段路径中的运行速度保持一致。然后可以使用缓动在路径的两端添加更为逼真的加速或减速。在向属性曲线应用缓动曲线时，属性曲线图形区域中将显示缓动曲线的可视叠加。通过将属性曲线和缓动曲线显示在同一图形区域中，叠加使得在测试动画时了解舞台上所显示的最终补间效果更为方便。因为动画编辑器中的缓动曲线可以很复杂，所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性 X、Y 和 Z 外，还可以使用缓动曲线创建其他任何属性的复杂补间。
如何用Paper.js制作网页动画
这里介绍一种简单的编译达到同样的强大效果的动画制作：
计算机喜欢干净简洁。不管是报表，统计，或者函数曲线，他们总是使用简洁明了的线条；而现实是，所有物理世界的物体是混沌的。树叶离开枝丫，水珠四溅 ，花朵迎风摇曳 － 所有这些物理世界的互动感觉简单，因为我们已经习惯这些。但是实际上哪怕是那一霎那的风，都是混沌的，她的算法非常复杂。这篇文章里面，我们要制作蒲公英种子微风舞动的动画。
(Image: Arnoldius)
动画制作的蒲公英没有办法模拟物理的复杂性，实际上她看上去更加自然如果我们不试图去模拟。我们将要制作一朵给你同样感觉的花朵但是省略了很多细节。
Paper.js
使用 canvas 标签 制作简单图形. 创建你的canvas:（宽：300，高：300）
1
2
canvas id="canvas" width="300" height="300"/canvas
//加入JavaScript:
1
2
//定义二维动画
var canvas = $('#canvas')[0].getContext("2d");
1
2
3
4
5
6
7
8
9
// 05－06：圆心x＝100，圆心y＝100, 半径＝15，初始角度＝0，结束＝360。,反时针。
canvas.beginPath();
canvas.arc(100, 100, 15, 0, Math.PI*2, true);
// 结束
canvas.closePath();
// 填色
canvas.fill();
掌握canvas的基本就很容易做这些，但是如果你要制作更加复杂的东西，你需要高级编译语言像Paper.js
Paper.js 是一个 JavaScript库用来制作绘图和动画， 一种Adobe Illustrator使用的基于Scriptographer的脚本语言 . 它自称是“矢量图脚本语言中的瑞士军刀”（ “The Swiss Army Knife of Vector Graphics Scripting,” ），其中重点突出矢量。
图形制作中有两种：矢量图和栅格图。栅格图就像你照相机拍出来的图片，如果你放大看，就是颜色填充的方格。矢量图是有点连线组成的。他们是不同的线条租和形状组，根据不同的指令绘图。如果用矢量图，如图，这个Z放大后还是线条光滑，色泽饱满。相比较，左边的栅格图就很模糊了。
threejs--模型动画线性控制
最近遇见一个比较有意思需求，需要将模型动画像视频一样可以线性拖拽播放动画进程、调节动画播放速度及随时暂停和播放动画。效果如下图
现在开始干货分享：
1. 初始化场景、相机、灯光、及模型加载的基本工作就不再赘述了，不太清楚的朋友看下threejs--初创项目。
2. 需要一个k好动画的模型，这个大家可以自己完成
3. 我们需要一个可以自由滑动的滑块，用来记录动画播放的进程。还需要一个暂停和播放的按钮来控制动画的开启和暂停
p class="h_manualDrop"span装配进度/spaninput class="h_manualInstallVal" type="range" min="0" step="0.01"/p
4. 模型加载阶段 我们需要对模型动画进行处理
load.loader('./model/test.glb,function(gl){
scene.add(gl.scene)//将模型加入到场景中
mixer =new THREE.AnimationMixer(gl.scene);
action = mixer.clipAction(gl.animations[0]);
action.play();///
$('.h_manualInstallVal').attr('max',glb.animations[0].duration.toFixed(1));// 给滑块初始值
renderer.render( scene, camera );//渲染
})；
5. 在刷新场景时同步滑块上动画进度
function onUpdate() {
let renderTime = clock.getDelta();
if (action) {// 实时更新滑块进度
$('.h_manualInstallVal').val(action.time);
}
if (mixer) {
mixer.update(renderTime);
}
requestAnimationFrame( onUpdate );
renderer.render( scene, camera );
controls.update();// 想让相机控制器有效 这个就需要实时更新控制器。必须在摄像机的变换发生任何手动改变后调用
}
6. 滑块添加事件，反向控制模型动画播放进度
$('.h_manualInstallVal').on('input',function (){
action.time=$(this).val()*1;
action.paused=true;
$('.h_manualDrop').attr('data-bool','act');
})
7. 播放暂停按钮控制动画的播放与暂停
$('.h_manualDrop').on(‘click',function (){// 动画 播放与暂停
if($(this).attr('data-bool')=='act'){
$(this).attr('data-bool','');
action.paused=false;
}else{
$(this).attr('data-bool','act');
action.paused=true;
}
});
结语：模型的自主操控之前已经讲过了，不再赘述，欢迎大家一起学习交流 需要测试模型的话 可以给我留言
