博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jTopo学习笔记5——动画
阅读量:5891 次
发布时间:2019-06-19

本文共 1420 字,大约阅读时间需要 4 分钟。

stage.frames = 240; // (必须设置)设置当前舞台播放的帧数

var animates = [// 设置目标值 

 {rotate: 2*Math.PI},

 {scaleX: 2},

 {height:130, y: 180}, 

 {alpha: 0.1},

 {alpha: 0.2, y: 90},

 {rotate: -4*Math.PI, scaleX: 2.5, scaleY: 2.5}, 

 {x: 300, y: 400, width: 10, height: 10, rotate: 2*Math.PI} 

];

 for(var i=0; i<animates.length; i++){ 

 var node = new JTopo.Node("node"); 

 node.setCenterLocation(100 + i * 90, 300); 

 scene.add(node);

 JTopo.Animate.stepByStep(node, animates[i], 3000, true).start(); 

 // 参数1 节点 参数2 动画目标 参数3 时间ms 参数4 循环开关 

 }

 function myNode(text, x, y){

 var node = new JTopo.Node(text); 

 node.percent = 0.8; 

 node.beginDegree = 0; 

 node.width = node.height = 70; 

 node.setLocation(x, y);

 node.textPosition = "Middle_Center";

 node.paint = function(g){ 

 g.save(); 

 g.beginPath();

 g.moveTo(0,0);

 g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';

 g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent); g.fill(); 

 g.closePath();

 g.beginPath();

 g.fillStyle = 'rgba(0,0,255,' + this.alpha + ')';

 g.moveTo(0,0);

 g.arc(0, 0, this.width/2-8, this.beginDegree, this.beginDegree + 2*Math.PI);

 g.fill(); 

 g.closePath();

 g.restore();

 this.paintText(g); 

 }; 

 scene.add(node); 

 return node;

 } 

 var node1 = myNode('自定义',355, 151);

 node1.percent = 0.1; 

 JTopo.Animate.stepByStep(node1, { percent: 1 }, 5000, true).start(); 

 var node2 = myNode('自定义',155, 151);

 JTopo.Animate.stepByStep(node2, { 

 beginDegree: 2*Math.PI 

 }, 3000, true).start();     

转载地址:http://dobsx.baihongyu.com/

你可能感兴趣的文章
日志服务器架构设计
查看>>
使用Unity开发Android的几种调试方法
查看>>
C++ 基础笔记(一)
查看>>
编译内核出错:invalid option `abi=aapcs-linux' 解决办法
查看>>
System.Func<>与System.Action<>
查看>>
[翻译] EnterTheMatrix
查看>>
asp.net开源CMS推荐
查看>>
我所思考的生活,致半年后的自己
查看>>
csharp skype send message in winform
查看>>
jQuery plugin: Tablesorter 2.0
查看>>
MMORPG 游戏服务器端设计--转载
查看>>
C#实现无标题栏窗体点击任务栏图标正常最小化或还原的解决方法
查看>>
《星辰傀儡线》人物续:“灭世者”、“疯狂者”、“叛逆者”三兄妹
查看>>
安装系统字体
查看>>
SILK 的 Tilt的意思
查看>>
Html学习笔记3
查看>>
批处理学习笔记8 - 深入学习For命令1
查看>>
ActiveX控件的安全初始化和脚本操作 和 数字签名SIGN
查看>>
Eclipse console文本换行
查看>>
微信支付开发(11) Native支付
查看>>