CreateJS 学习4 动画、TweenJS

最新推荐文章于 2022-08-10 23:07:24 发布
最新推荐文章于 2022-08-10 23:07:24 发布
阅读量2.1k 收藏 6
点赞数 1
分类专栏： # Canvas WebGL ThreeJS 文章标签： 移动 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xundh/article/details/78821305
版权

水平移动动画示例

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var stage = new createjs.Stage(canvas);//直接使用canvas的ID
            var shape=new createjs.Shape();
            shape.graphics.beginFill("red").drawRect(0,0,50,50);  


            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(60);

            stage.addChild(shape);
            function tick(e) {

                if(shape.x>stage.canvas.width){  
                    shape.x=0;  
                }  
                shape.x++;  
                stage.update();
            }
        </script>
    </body>
</html>

这里写图片描述

TweenJS

补间动画

中文文档：
http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html

简单的补间动画

这个渐变将渐变目标alpha属性用一秒从0渐变到1,然后调用handleComplete函数。

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
            <script src="tweenjs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var stage = new createjs.Stage(canvas);//直接使用canvas的ID
            var shape=new createjs.Shape();
            shape.graphics.beginFill("red").drawRect(0,0,50,50);  

            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(60);

            stage.addChild(shape);
            shape.alpha=0;
            createjs.Tween.get(shape).to({alpha:1},1000).call(handleComplete);
            function handleComplete(){
                console.log('end');
            }
            function tick(e) {
                stage.update();
            }
        </script>
    </body>
</html>

这里写图片描述

可链式编程的补间动画
 target.alpha = 1;
    createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
    function handleComplete() {
        //渐变完成执行
    }
水平移动tweenjs代码
<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
            <script src="tweenjs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var stage = new createjs.Stage(canvas);//直接使用canvas的ID
            var shape=new createjs.Shape();
            shape.graphics.beginFill("red").drawRect(0,0,50,50);  

            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(60);

            stage.addChild(shape);

            var position={x:100,y:0};
            var tween = new createjs.Tween.get(shape,{loop:true}).to({x:500},2000);


            function tick(e) {

                stage.update();
            }
        </script>
    </body>
</html>

这里写图片描述

说明：

  • get()获取要添加运动轨迹的元素
    如果需要动画循环进行，只需要加上{loop:true}，还有其他选项，比如override
  • wait()可以让动画延迟播放
  • to()来确定运动的轨迹
    to()的第一个参数{x:1000}，指明了x坐标的终点，而且在{}中不只可以改变坐标，
    alpha:0.5可以改变透明度，
    scaleX/Y = 2可以改变大小，
    rotation:360可以改变角度，实现旋转；
    to()的第二个参数，指明动画的时常，也是就是x坐标运动到终点所用的时间，
    第三个参数createjs.Ease，可以设置运动的轨迹和运动的方式。
    call(),可以在动画结束后，调用一个函数。

一个复杂点的链式操作

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
            <script src="tweenjs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var stage = new createjs.Stage(canvas);//直接使用canvas的ID
            var circle=new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(20,20,50);  

            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(60);

            stage.addChild(circle);

            var position={x:100,y:0};
            createjs.Tween.get(circle,{loop:true}).to({x:500},2000)  
               .to({y:300,alpha:0.2},2000)  
               .to({x:100,alpha:1, scaleX:1.5,scaleY:1.5},2000)  
               .to({y:100, scaleX:1,scaleY:1},2000);  

            function tick(e) {
                stage.update();
            }
        </script>
    </body>
</html>

效果：
这里写图片描述

弹跳效果

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
            <script src="tweenjs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="700"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var stage = new createjs.Stage(canvas);//直接使用canvas的ID
            var circle=new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(60,20,50);  

            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(60);

            stage.addChild(circle);

            createjs.Tween.get(circle,{loop:true}).wait(200).to({y:450},2000,createjs.Ease.bounceOut);  

            function tick(e) {
                stage.update();
            }
        </script>
    </body>
</html>

这里写图片描述
其它更多Ease效果演示：
http://andysaia.com/blog/tweenjs/
更多demo：
https://www.createjs.com/demos/tweenjs/tween_circles

逐帧动画

<html>
    <head>
            <script src="easeljs.min.js" charset="utf-8"></script>
    </head>
    <body>
        <canvas id="canvas" width="500" height="300"></canvas>
        <script>

          var canvas = document.getElementById("canvas"),
            stage = new createjs.Stage(canvas);

          function setup() {
              var spritesheet = new createjs.SpriteSheet({
                      "images": ['http://www.igeekbar.com/igeekbar/networks/uploadimgthumb/7a59e1d8-ac16-47d7-a642-fd626cbf3efe.jpg'],
                      "frames": {"height": 195, "count": 11, "width": 313},
                      "animations": { run: [0,10]}
                  });

              var character = new createjs.Sprite(spritesheet, "run");
              character.framerate = 11; 
              character.play();//播放动画
              stage.addChild(character);

              createjs.Ticker.addEventListener("tick", tick);
          }

          function tick(event) {
              stage.update();
          }

          setup();
        </script>
    </body>
</html>

动画图片：
这里写图片描述

运行效果：
这里写图片描述

参考：
http://blog.csdn.net/lanix516/article/details/47323573

另外tweenjs还有 CSSPluginjs、MotionGuidePlugin插件库。

编程圈子
关注
专栏目录
CreateJS 动画
小芽教程
05-15 3279
个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf       QQ:909648986 EaselJS 动画 本节将介绍创建图形动画,精灵表位图动画,DOM元素动画. 例子1 图形动画 你的浏览器不支持canvas标签 var myCanvas=document.getEle
createjs-tweenjs初体验
qq_31799003的博客
12-27 2031
1.从简单开始，引入tweenjs文件 &lt;script src="https://code.createjs.com/1.0.0/tweenjs.min.js"&gt; &lt;/script&gt; 2.先移除在init函数底部的 stage.update（）  在底部的空白区可以放置我们的tweenjs ， 首先获取circle实例 （1）将 loop：true 传入，然后我们...
使用CreateJS制作动画
皓月如我的专栏
04-13 1155
收到任务制作港口粗模型的动画效果。 分为4个部分： 船：淡入淡出，平移进入泊位； 岸桥：在船靠岸后降下作业，装卸完成后升起； 车队：在岸桥装卸点排队，以数字显示排队长度； 堆场：动态展示堆场使用率。 CreateJS 官网链接： https://www.createjs.com Bilibili 视频教程：https://www.bilibili.com/video/BV1sT4y1E72t?spm_id_from=333.337.search-card.all.click 程序目录： index.h
制作动画或小游戏——CreateJS事件（二）
weixin_30344995的博客
05-04 316
在Canvas中如果要添加事件，就需要计算坐标来模拟各种事件，而EaselJS中已经封装好了多个事件，只需调用即可。 一、事件 1）点击 事件是绑定在Shape类中的，click事件与DOM中的意思是一样的，还有个双击事件dblckick，完整的代码可以查看这里。 var object = new createjs.Shape(); object.addEventListe...
2、CreateJS介绍-TweenJS
01-12 172
需要在html5文件中引入的CreateJS库文件是easeljs-0.7.1.min.js和tweenjs-0.5.1.min.js HTML5文件如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
如何使用Createjs来编写HTML5游戏（四）TweenJS和Tick动画
热门推荐
失业矿工的博客
08-06 1万+
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。 一个简单的ti
SpriteStudio-for-CreateJS:一个允许CreateJS播放SpriteStudio动画的库
05-12
4. 与其他CreateJS组件进行交互，例如响应用户输入或与其他动画同步。 5. 利用CreateJS的事件系统，当动画到达特定帧时触发相应的功能。 尽管SpriteStudio-for-CreateJS目前可能还有些不稳定，但随着社区的贡献和...
CreateJS构建的分楼层人物定位效果动画
01-21
CreateJS的TweenJS模块在此发挥重要作用，它允许开发者轻松创建平滑的过渡动画，例如人物的站立、左转、右转和行走动作。开发者可以定义关键帧，然后让TweenJS自动计算并填充中间帧，生成流畅的动作序列。同时，人物...
TweenJS:一个简单而强大的Java补间动画库。 CreateJS库套件的一部分
04-06
TweenJS是一个简单的补间库，可在Javascript中使用。 它被开发为与EaselJS库很好地集成在一起，但是并不依赖于它或不特定于它（尽管默认情况下它使用相同的Ticker和Event类）。 它支持补间数值对象属性和CSS样式...
CreateJS奥运五环动画
struggle_青春
02-26 1045
索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点这里，下载收藏请戳这里。 html文件非常简单，仅仅是弄了个canvas [html] view plaincopy canvas id="world">canvas>   没有用到CSS，JS文件如下，在这个效果里面五环我们需要两个类，环类和粒子类。这里用到了Create
createjs-doc:CreateJS 中文文档
05-16
createjs-doc CreateJS 中文文档 CreateJS 一共分为四个部分 EaselJS 主要负责Canvas绘图的部分 TweenJS 主要负责动画效果，与EaselJS 完全结合，支持链式调用 SoundJS 主要负责声音的管理，具备完善的兼容处理 PreloadJS 主要负责加载各种资源，采用XHR2实现，提供了实时进度和多队列支持 官方文档 (英文)
12 使用 Tween.js 创建补间动画
现在学习也不晚
10-08 2738
Tween是什么 补间(动画)（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。 在Three.js中，我们也有一些修改模型的位置，旋转和缩放的需求，我们无法直接在webgl中使用css3动画，所以，Tween给我们提供了一个很好的解决方案。...
EaselJS简明教程2-动画
webdev
02-15 231
EaselJS简明教程系列第二部分，今天主要看看动画的实现，没有看过第一部分的可以看看教程1绘图。 动画是将静止的画面变为动态的艺术，由静止到动态的实现，主要依靠人眼的视觉残留效应。 动画可以分为逐帧动画和补间动画两种，逐帧动画把动画（例如人物动作）进行分解，然后绘制出连续的、具有代表性的动作，连续播放形成动画，逐帧动画适用于复杂的不连续的动画。 补间动画，指我们给定动作的初始状态和结束状态...
CreateJS-TweenJS文档翻译
beyond__devil的博客
01-08 2506
TweenJS 模块 TweenJS提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性，并允许链接补间动画和行动结合起来，创造出复杂的序列。 简单tween 下面的示例渐变：1000ms内将目标的alpha属性从0-1渐变，之后调用 'handleComplete' 函数 target.alpha = 0; createjs.Tween.get(targ
canvas与CreateJS实现图片动画
一起coding，一起嗨。
08-10 1504
代码】canvas与CreateJS实现图片动画。
Create.JS
晓光同学的博客
05-07 864
好久不写博客了，今天随便写一下关于Create.JS，希望对大家有用！Create.JS简介官网：http://www.createjs.cc/Create.JS中包含以下四个部分：Easel.JS：用于 Sprites、动画、向量和位图的绘制，创建 HTML5 Canvas 上的交互体验（包含多点触控）Tween.JS：用于做动画效果Sound.JS：音频播放引擎Preload.JS：网站资源预...
html5 精灵动画,H5案例分享：CreateJs-EaselJS精灵Sprite类和简明动画
weixin_42298254的博客
06-08 936
CreateJs-EaselJS精灵Sprite类和简明动画一、EaselJS中Sprite类EaselJS精灵Sprite类是用spritesheet实例显示一个帧或帧序列(即动画)。精灵片是一系列的图像(通常是动画帧)合并成一个单一的图像。例如，一个动画由8个100x100图像可以组合成一个400X200精灵表。sprite结构：Sprite ( spriteSheet frameOrAni...
createjs Tween effect
shuishou1000的博客
12-30 358
app.js var stage,tweens,circleCount=25,activeCount function init(){ stage=new createjs.Stage("canvas") createjs.Ticker.setFPS(60) //createjs.MotionGuidePlugin.install(createjs.Tween) start() ...
JS—动画缓动—tween.js
weixin_34192732的博客
08-14 579
requestAnimFrame兼容 window.requestAnimFrame = (function (callback,time) { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程圈子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值