一款基于TweenMax跟随鼠标单击移动的div - jQuery - web - ITeye论坛
一款基于TweenMax跟随鼠标单击移动的div
锁定老帖子
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
liaohuolin88
积分: 3040
来自: 大连
发表时间：&&
前面给大家分享过，今天给大家分享一款基于TweenMax跟随鼠标单击移动的div。在这款实例中你可以单击任意位置，div会移动到你单击的位置。效果图如下：
实现的代码。
html代码：
&html ng-app="app" ng-click="moveblock($event)"&
&block class="block"&Where Do You Want Me?&br /&Click Anywhere On The Page&br /& To Direct Me&/block&
&!--Doesn't prop working on a fix for that and will update if/when I get it right.. !--&
&script src='angular.min.js'&&/script&
&script src='TweenMax.min.js'&&/script&
&script src='angular-animate.min.js'&&/script&
//cue : highlight mouse click position
(function () {
var cue = document.createElement('div'),
pressed = false;
cue.id = 'cue';
document.body.appendChild(cue);
var offset = cue.offsetWidth / 2;
document.addEventListener('mousedown', function (ev) {
document.body.classList.add('down');
pressed = true;
movecue(ev.pageX, ev.pageY);
}, false);
document.addEventListener('mouseup', function (ev) {
document.body.classList.remove('down');
pressed = false;
}, false);
function movecue(x, y) {
cue.style.left = x - offset + 'px';
cue.style.top = y - offset + 'px';
document.addEventListener('mousemove', function (ev) {
if (pressed) { movecue(ev.pageX, ev.pageY); }
}, false);
//********************
//app directive
.module("app", ["ngAnimate"])
.directive("block", blockDirective)
.animation(".block", blockAnimation);
Move Block
function blockDirective($animate) {
restrict: "EA",
link: function (scope, element, attrs) {
var radius = element[0].offsetWidth / 2;
TweenMax.set(element, {
x: window.innerWidth / 2 - radius,
y: window.innerHeight / 2 - radius
scope.moveblock = function ($event) {
$animate.animate(element, {}, {
x: $event.pageX - radius,
y: $event.pageY - radius
function blockAnimation() {
animate: function (element, className, from, to, done) {
TweenMax.to(element, 0.5, {
ease: Back.easeOut,
force3D: true,
onStart: done
//@ sourceURL=pen.js
cursor: pointer;
font-family: 'Lato' , sans-serif;
font-size: 1em;
margin: 0;
background: radial-gradient(black 15%,
transparent 16%) 0 0, radial-gradient(black 15%,
transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1)
15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1)
15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
overflow: hidden;
width: 250px;
color: #F7F6F2;
text-align: center;
padding-top: 1.5em;
height: 100px;
position: absolute;
background: #000;
opacity: 0.7;
border-radius: 2px;
border: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);
-moz-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);
-webkit-shadow: 4px 4px 4px 4px rgba(0,0,0,0.4);
box-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);
-moz-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);
-webkit-shadow: -4px 4px -4px 4px rgba(0,0,0,0.4);
background: rgba(255, 255, 10, 0.5 );
width: 100px;
height: 100px;
position: absolute;
border-radius: 100px;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform: scale( 0,0 );
-moz-transform: scale( 0,0 );
-ms-transform: scale( 0,0 );
-o-transform: scale( 0,0 );
transform: scale( 0,0 );
.down #cue
-webkit-transform: scale( 1, 1 );
-moz-transform: scale( 1, 1 );
-ms-transform: scale( 1, 1 );
-o-transform: scale( 1, 1 );
transform: scale( 1, 1 );
注：本文原创文章，转载请注明原文地址：
跳转论坛:移动开发技术
Web前端技术
Java企业应用
编程语言技术 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
[转]TweenMax的用法和参数说明
下载积分：30
内容提示：[转]TweenMax的用法和参数说明
文档格式：PDF|
浏览次数：245|
上传日期： 10:08:54|
文档星级：
该用户还上传了这些文档
[转]TweenMax的用法和参数说明
官方公共微信TweenMax.min.js
TweenMax.min.js
Flash业界久负盛名的动画引擎（TweenLite等）GreenSock推出了新一代动画引擎平台GreenSock
Animation Platform，这个是JS版本！
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。greensock缓动类包之TweenMax
greensock缓动类包之TweenMax1~了解TweenMax类
TweenMax建立在TweenLite核心类及TweenFilterLite基础之上，新增功能:
& & 1) 进行贝塞尔缓动
& & 2）连续的缓动（序列化的缓动）
3）对对象数组中的对象进行同意的缓动使用allTo()或allFrom();
4）缓动中的暂停/继续功能，使用pause()和resume()方法，或“paused”属性
5）跳转至缓动的任何时段，使用“progress”属性。输入一个0~1之间的数值
6）对16进制的颜色进行缓动，使用hexColors属性
7）获取缓动效果的实例数组，该数组中包括了加在一个指定目标对象上的所有的缓动效果的实例，TweenMax.getTweensOf(mc);如果该mc应用了多个缓动效果，则返回一个数组，数组中是不同的缓动效果的实例
8）获取TweenMax、TweenLite和TweenFilterLite的实例数组，使用静态函数getAllTweens();
& & 9）种植所有的缓动
& & 10）暂停/继续全部的缓动
2~常用方法
& & &1）public function
TweenMax(target:Object, duration:Number, vars:Object)
& & 描述：构造方法
&target:目标对象；duration：持续的时间（单位：秒）；vars：包含想要缓动的的属性值
&&&vars：缓动的常用属性包括｛
alpha:Number：目标对象在缓动结束时的alpha
& & delay:Number：延迟缓动
& & ease:Function：缓动函数
easeParames:Array：缓动函数中的参数
autoAlpha:Number：用来代替alpha属性，可获得一些附加小伙，实现透明度缓动效果
volume:Number：改变MovieClip或者SoundChannel的音量，将缓动结束时的音量值调整为指定的值
tint:Number：改变可显示对象的色调/颜色
frame:Number：将MovieClip缓动到指定的帧频
bezier:Array：Bezier缓动，允许你以非线醒的方式进行缓动
bezierThrough:Array：贝赛尔曲线要经过的位置点
orientToBezier:Array：使MovieClip自动调整自身的方向，使之符合贝塞尔路径[x,y,rotation,ang](rotation:旋转属性，ang:旋转的度数)
hexColors:Object：缓动指定对象中相应颜色属性的值（TweenMax.to(my_obj,{hexColors:{mycolor:0Xff0000}})）
onStart:Function：在缓动开始时想要执行的某个函数
onStartParams:Array：缓动开始时要执行函数的参数
onUpdate:Function：缓动过程中，每次更新属性值时，要执行的函数
onUpdateParams:Array：同上。。
onComplete:Function：缓动结束时要执行的函数
onCompleteParams:Array：同上。。&&
renderOnStart:Boolean：阻止缓动的渲染效果直到缓动真正开始
overwrite:Boolean：缓动效果是否可以被覆盖
blurFilter:Object：应用模糊滤镜，需要传递一个具有下列属性的对象作为参数：blurX(横向的模糊度)，blurY(纵向的模糊度),quality(品质，默认值为2)
glowFilter:Object：应用发光滤镜，需要传递一个带有以下属性的对象：alpha,blurX,blurY,color,strength(强度),quality,inner(内侧发&&
&& & 光),knockout(挖空)
colorMatrixFilter:Object：应用颜色矩阵滤镜，需要传递一个带有以下属性的对象：colorize(色调),amount(总量),contrast(对比度),brightness(亮度),saturation(饱和度),hue(色相),threshold(阀值),relative(相关性),matrix(颜色矩阵)
dropShadowFilter:Object：应用阴影滤镜，需要传递一个带有以下属性的对象：alpha,angle(角度),blurX,blurY,color,distance(距离),strength,quality
bevelFilter:Object：应用斜角滤镜，需要传递一个带有以下属性的对象：angle,blurX,blurY,distance,hightlightAlpha(高亮区的透明度),highlightColor(高亮区的颜色),shadowAlpha(阴影区的透明度),shadowColor(阴影区的颜色),strength(强度),quality
progress:Number：缓动进程0~1
&& & paused:Boolean：是否停止缓动
2）allTo(targets:Array, duration:Number, vars:Object):Array
返回的是一个数组保存了创建的所有TweenMax Object。
3）&allFrom(targets:Array, duration:Number, vars:Object):Array
跟allTo一样，只是定义的是运动对象的初始状态，运动到当前状态。
4）&complete(skipRender:Boolean = false, suppressEvents:Boolean =
false):void
&强制TweenMax到最后结束部分。如果第一个参数设为true，则不会渲染，TweenMax将停在调用那一刻。如果第二个参数设为true则不会触发onCompelte,onUpdate等事件。
5）&delayedCall(delay:Number, onComplete:Function,
onCompleteParams:Array = null, useFrames:Boolean =
false):TweenMax
& &&延迟执行函数
6）getTweensOf(target:Object):Array
&返回运动物体正在运行的的TweenMax Object
7）isTweening(target:Object):Boolean
&判断是否正在缓动
8）&updateTo(vars:Object, resetDuration:Boolean = false):void
&可以在运行中新增或改变原有的属性变化值。第二个参数设为false时将不重播缓动，而继续缓动到新的值；设为true将中断并重播缓动。
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。