paper+TweenMax实现数字烟花绽放动画效果代码
代码语言:html
所属分类:动画
代码描述:paper+TweenMax实现数字烟花绽放动画效果代码
代码标签: paper TweenMax 数字 烟花 绽放 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #000000; margin: 0; } #canvas { position: absolute; width: 100%; height: 100%; } </style> </head> <body> <canvas resize="true" id="canvas"></canvas> <!-- I wrote the code in paperscript, but could not find a way to use in codepen, so the js code is up here. --> <script resize="true" type="text/paperscript" canvas="canvas"> //////////// // CLASSES //////////// function Hex(position, targetRadius, color) { var subs = 3; this.radius = targetRadius; this.sides = randomIndex([4, 6, 8, 10, 12]); this.targetHex = new Path.RegularPolygon(position, this.sides, targetRadius); this.paths = []; for (var i = 0; i < subs; i++) { var h = new Path.RegularPolygon(position, this.sides, 0); if (i === 0) { h.strokeColor = color; } else { h.strokeColor = new Color({ hue:color.hue, saturation:color.saturation, lightness:randomRange(0.4, 0.6), alpha:1 }); } h.strokeWidth = 24; h.shadowBlur = 64; h.shadowColor = h.strokeColor; this.paths.push(h); } this.color = this.paths[subs - 1].strokeColor; this.speed = 125; } Hex.prototype = { animate:function() { var tl = new TimelineMax({ onComplete:function() { this.paths.forEach(function(p) { p.remove(); }); }, onCompleteScope:this }); var duration = this.radius / this.speed, offset = 0, ease = Cubic.easeOut; this.paths.forEach(function(h) { var from, to; for (var i = 0; i < h.segments.length; i++) { from = h.segments[i].point; to = this.targetHex.segments[i].point; tl.to(from, duration, {x:to.x, y:to.y, ease:ease}, offset); tl.to(h, duration, {strokeWidth:0, ease:ease}, offset); } offset += 0.2; }, this); return tl; } }; function Line(start, angle, length, color) { this.start = start; this.end = new Point(); this.end.setAngle(angle); this.end.setLength(length); this.end += this.start; this.path = new Path(); this.path.add(this.start, this.end); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0