超酷光带效果
- 刘潇 - 博客园-首页原创精华区今天看到一个网站上超酷的光带效果，分享给大家看看~. 查看效果：超酷光带效果 （flash载入需要等待一点时间） . // forked from one_truth's forked from: 光るリボン（Ribbon Light）. // forked from mousepancyo's 光るリボン（Ribbon Light）.
超酷光带效果
标签：
效果
| 发表时间：2011-05-03 12:38 | 作者：molehill 刘潇
出处：http://www.cnblogs.com/
今天看到一个网站上超酷的光带效果，分享给大家看看~
查看效果：超酷光带效果 （flash载入需要等待一点时间）
部分代码：
/**
* Copyright david1 ( http://wonderfl.net/user/david1 )
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/gjQv
*/
// forked from one_truth's forked from: 光るリボン（Ribbon Light）
// forked from mousepancyo's 光るリボン（Ribbon Light）
// forked from nutsu's SketchSample6
package {
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.geom.ColorTransform;
[SWF(width=465,height=465,backgroundColor=0x000000,frameRate=60)]
public class Main extends Sprite{
private const WIDTH:Number = 465;
private const HEIGHT:Number = 465;
private var _sketch:CurveSketch;
private var _bmd:BitmapData;
private var _bm:Bitmap;
private var _container:Sprite = new Sprite();
public function Main() {
graphics.beginFill(0)
graphics.drawRect(0, 0, WIDTH, HEIGHT)
graphics.endFill()
addChild(_container);
//
_sketch = new CurveSketch();
_bmd = new BitmapData(WIDTH, HEIGHT, true, 0);
_container.addChild(_sketch);
_container.addChild(_bm = new Bitmap(_bmd) as Bitmap);
_bm.blendMode = "add";
//
addEventListener(Event.ENTER_FRAME, update);
}
private function update(e:Event):void{
_bmd.draw(_sketch, null, null, "add");
_bmd.applyFilter(_bmd, _bmd.rect, new Point(), new BlurFilter(8, 8, 4));
}
}
}
//package {
import frocessing.display.F5MovieClip2D;
import frocessing.geom.FGradientMatrix;
import frocessing.color.ColorHSV
class CurveSketch extends F5MovieClip2D
{
//加速度運動の変数
//位置
private var xx:Number;
private var yy:Number;
//速度
private var vx:Number;
private var vy:Number;
//加速度の係数
private var ac:Number;
//速度の減衰係数
private var de:Number;
//描画座標
private var px0:Array;
private var py0:Array;
private var px1:Array;
private var py1:Array;
private var t:Number = 0
//描画グループ
private var shapes:Array;
public function CurveSketch()
{
//初期化
vx = vy = 0.0;
xx = mouseX;
yy = mouseY;
ac = 0.06;
de = 0.9;
px0 = [xx, xx, xx, xx];
py0 = [yy, yy, yy, yy];
px1 = [xx, xx, xx, xx];
py1 = [yy, yy, yy, yy];
shapes = [];
//線と塗りの色指定
noStroke();
}
public function draw():void
{
//加速度運動
xx += vx += ( mouseX - xx ) * ac;
yy += vy += ( mouseY - yy ) * ac;
var len:Number = mag( vx, vy );
//新しい描画座標
var x0:Number = xx + 1 + len * 0.1;
var y0:Number = yy - 1 - len * 0.1;
var x1:Number = xx - 1 - len * 0.1;
var y1:Number = yy + 1 + len * 0.1;
//描画座標
px0.shift(); px0.push( x0 );
py0.shift(); py0.push( y0 );
px1.shift(); px1.push( x1 );
py1.shift(); py1.push( y1 );
var _px0:Array = [px0[0], px0[1], px0[2], px0[3]];
var _py0:Array = [py0[0], py0[1], py0[2], py0[3]];
var _px1:Array = [px1[0], px1[1], px1[2], px1[3]];
var _py1:Array = [py1[0], py1[1], py1[2], py1[3]];
shapes.push( { px0:_px0, py0:_py0, px1:_px1, py1:_py1, mtx:null} );
if (shapes.length >= 50) shapes.shift();
var shapesLength:int = shapes.length;
for (var i:int = shapesLength-1; i >= 0; i--)
{
var sh:Object = shapes[i];
var color:ColorHSV = new ColorHSV(t, 0.8, 1, 0.1)
t += 0.05;
beginFill(int(color), 0.2)
beginShape();
curveVertex( sh.px0[0], sh.py0[0] );
curveVertex( sh.px0[1], sh.py0[1] );
curveVertex( sh.px0[2], sh.py0[2] );
curveVertex( sh.px0[3], sh.py0[3] );
vertex( sh.px1[2], sh.py1[2] );
curveVertex( sh.px1[3], sh.py1[3] );
curveVertex( sh.px1[2], sh.py1[2] );
curveVertex( sh.px1[1], sh.py1[1] );
curveVertex( sh.px1[0], sh.py1[0] );
endShape();
}
//減衰処理
vx *= de;
vy *= de;
}
}
//}
* MIT License ( http://www.opensource.org/licenses/mit-license.php )
* Downloaded from: http://wonderfl.net/c/gjQv
*/
// forked from one_truth's forked from: 光るリボン（Ribbon Light）
// forked from mousepancyo's 光るリボン（Ribbon Light）
// forked from nutsu's SketchSample6
package {
import flash.display.Sprite;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.events.Event;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.geom.ColorTransform;
[SWF(width=465,height=465,backgroundColor=0x000000,frameRate=60)]
public class Main extends Sprite{
private const WIDTH:Number = 465;
private const HEIGHT:Number = 465;
private var _sketch:CurveSketch;
private var _bmd:BitmapData;
private var _bm:Bitmap;
private var _container:Sprite = new Sprite();
public function Main() {
graphics.beginFill(0)
graphics.drawRect(0, 0, WIDTH, HEIGHT)
graphics.endFill()
addChild(_container);
//
_sketch = new CurveSketch();
_bmd = new BitmapData(WIDTH, HEIGHT, true, 0);
_container.addChild(_sketch);
_container.addChild(_bm = new Bitmap(_bmd) as Bitmap);
_bm.blendMode = "add";
//
addEventListener(Event.ENTER_FRAME, update);
}
private function update(e:Event):void{
_bmd.draw(_sketch, null, null, "add");
_bmd.applyFilter(_bmd, _bmd.rect, new Point(), new BlurFilter(8, 8, 4));
}
}
}
//package {
import frocessing.display.F5MovieClip2D;
import frocessing.geom.FGradientMatrix;
import frocessing.color.ColorHSV
class CurveSketch extends F5MovieClip2D
{
//加速度運動の変数
//位置
private var xx:Number;
private var yy:Number;
//速度
private var vx:Number;
private var vy:Number;
//加速度の係数
private var ac:Number;
//速度の減衰係数
private var de:Number;
//描画座標
private var px0:Array;
private var py0:Array;
private var px1:Array;
private var py1:Array;
private var t:Number = 0
//描画グループ
private var shapes:Array;
public function CurveSketch()
{
//初期化
vx = vy = 0.0;
xx = mouseX;
yy = mouseY;
ac = 0.06;
de = 0.9;
px0 = [xx, xx, xx, xx];
py0 = [yy, yy, yy, yy];
px1 = [xx, xx, xx, xx];
py1 = [yy, yy, yy, yy];
shapes = [];
//線と塗りの色指定
noStroke();
}
public function draw():void
{
//加速度運動
xx += vx += ( mouseX - xx ) * ac;
yy += vy += ( mouseY - yy ) * ac;
var len:Number = mag( vx, vy );
//新しい描画座標
var x0:Number = xx + 1 + len * 0.1;
var y0:Number = yy - 1 - len * 0.1;
var x1:Number = xx - 1 - len * 0.1;
var y1:Number = yy + 1 + len * 0.1;
//描画座標
px0.shift(); px0.push( x0 );
py0.shift(); py0.push( y0 );
px1.shift(); px1.push( x1 );
py1.shift(); py1.push( y1 );
var _px0:Array = [px0[0], px0[1], px0[2], px0[3]];
var _py0:Array = [py0[0], py0[1], py0[2], py0[3]];
var _px1:Array = [px1[0], px1[1], px1[2], px1[3]];
var _py1:Array = [py1[0], py1[1], py1[2], py1[3]];
shapes.push( { px0:_px0, py0:_py0, px1:_px1, py1:_py1, mtx:null} );
if (shapes.length >= 50) shapes.shift();
var shapesLength:int = shapes.length;
for (var i:int = shapesLength-1; i >= 0; i--)
{
var sh:Object = shapes[i];
var color:ColorHSV = new ColorHSV(t, 0.8, 1, 0.1)
t += 0.05;
beginFill(int(color), 0.2)
beginShape();
curveVertex( sh.px0[0], sh.py0[0] );
curveVertex( sh.px0[1], sh.py0[1] );
curveVertex( sh.px0[2], sh.py0[2] );
curveVertex( sh.px0[3], sh.py0[3] );
vertex( sh.px1[2], sh.py1[2] );
curveVertex( sh.px1[3], sh.py1[3] );
curveVertex( sh.px1[2], sh.py1[2] );
curveVertex( sh.px1[1], sh.py1[1] );
curveVertex( sh.px1[0], sh.py1[0] );
endShape();
}
//減衰処理
vx *= de;
vy *= de;
}
}
//}
作者: molehill 发表于 2011-05-03 12:38 原文链接
最新新闻：
· 埃及Facebook革命内情(2011-05-03 21:05)
· 淘宝打假改变美国印象获贸易办公室认同(2011-05-03 21:04)
· 和墙对话(2011-05-03 20:38)
· 天文学家创造早期宇宙3D地图(2011-05-03 20:20)
· TechCrunch点评人人IPO：虽像Facebook但并不是(2011-05-03 20:17)
编辑推荐：再论抽象
相关 [效果] 推荐：
CSS3动画效果-animate.css
- - WEB前端开发animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出，滑块，淡入淡出，放大缩小等等. 你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页：http://daneden.me/animate/ git地址：https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.
Jquery easyui 下loaing效果
- - CSDN博客推荐文章beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功，关闭进度条. 作者：songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读：15 评论：0 查看评论.
Axure常用交互效果制作
- snip.wu - 盛大游戏UED 专注用户体验，改变生活，让互动娱乐更精彩本文旨在分享一些在Axure中，相对复杂但又常见的交互行为的制作方法，本期包含带提示的文本框和拖拽效果. 将提示信息放置于文本框内是一种常见的交互方式. 当文本框获得焦点时，提示文字消失. 当文本框失去焦点时，提示文字重新显示出来. 现在就让我们看下这种控件的制作方法. 从widget库中拖出text field控件.
45个创意的照片PS效果
- Desmond - 创意悠悠花园如果你有高超的PS技术，想对自己的照片进行一些创意的操作，那么今天分享的：45个创意的照片PS效果，应该会有你喜欢的，或者可以给你带来灵感. Read the rest of 45个创意的照片PS效果 (130 words). © emilo for 创意悠悠花园, 2011. Post tags: PS效果, 创意, 照片.
js等待加载效果2
- - CSDN博客推荐文章实例可以直接运行查看效果.
正在加载中. 作者：junmoxie 发表于2012-8-6 13:15:51 原文链接. 阅读：0 评论：0 查看评论.
常用CSS3动画效果合集-animate.css
- - 我爱互联网css是一个比较酷、炫的一个动画合集，很方便在你的项目中使用. 更便于你来寻找CSS的动画效果. 47款惊人的CSS3动画效果. 非常有用的HTML5,CSS3的框架. 10款令人难以相信的CSS3绘图效果. 18个明亮型纯CSS的绘图示例. 什么是HTML5和CSS3. HTML5和CSS3的新特性
(@yixieshi).
14个HTML5实现的效果合集
- - 互联网的那点事HTML5可不是什么虚幻的概念，与其高谈阔论的讨论HTML5未来的趋势和价值，不如一起研究一下现在的HTML5可以做出哪些成果，可以让我们做出出色的产品. Form Follows Function就是一個展示HTML5实现的网站，目前网站展示了14个作品，其中包括了交互操作以及视觉效果. 这些效果本身并不是一个完整的产品，但是加入到产品中就能让产品生色不少.
量化InnoDB group commit的效果
- - OurMySQL前几天有位开发的同学问了个问题，InnoDB的group commit效果如何. 之前说好了回头给看下，结果险些拖过年. Group commit 背景. InnoDB的redo log的group commit历史比较悠久了（有别于binlog的group commit）. 如果设置为1，每次事务提交都至少需要写一次redolog.