jquery-Velocity.js

来源：互联网发布：painter软件百度云编辑：程序博客网时间：2024/05/22 17:21

官方文档

一、简介

一个jquery的动画效果插件，支持color animation,transforms, loops, easings, SVG support, and scrolling.

二、使用准备

导入三个js：

jquery-x.x.x.js、velocity.js、velocity.ui.js

三、基本使用方式

jquery方式：

$("body").velocity({ opacity: 0.5 });//背景透明色变为0.5

javascript方法【使用这种方法，可以不用导入jquery.js】：

Velocity(document.body, { opacity: 0.5 });

四、具体使用

1、两个参数对象的方式：第一个参数对象是css属性key-value【骆驼式，如paddingLeft】，第二个参数对象是动画设置。

$element.velocity({    width: "500px",    property2: value2}, {    /* Velocity's default options */    duration: 400,    easing: "swing",    queue: "",    begin: undefined,    progress: undefined,    complete: undefined,    display: undefined,    visibility: undefined,    loop: false,    delay: false,    mobileHA: true});

2、一个参数对象的方式：属性和设置都放在同一个对象内。

$element.velocity({    properties: { opacity: 1 },    options: { duration: 500 }});

或者简写方式

$element.velocity({    p: { opacity: 1 },    o: { duration: 500 }});

3、简化方式：$element.velocity(propertyMap [, duration] [, easing] [, complete]).

$element.velocity({ top: 50 }, 1000);$element.velocity({ top: 50 }, 1000, "swing");$element.velocity({ top: 50 }, "swing");$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

五、单位

velocity.js支持的属性单位：px, em, rem, %, deg, vw/vh

velocity.js支持的属性运算符：+, -, *, /

$element.velocity({    top: 50, // Defaults to the px unit type    left: "50%",    width: "+=5rem", // Add 5rem to the current rem value    height: "*=2" // Double the current height});

注：rem不支持ie9以下，vw/vh不支持ie9以下和android4.4以下

六、velocity.js方法链接Chaining

$element    /*  width 动画. */    .velocity({ width: 75 })    /* 当width动画执行完之后，立刻执行height动画 */    .velocity({ height: 0 });

七、设置options

1、duration动画执行时间

$element.velocity({ opacity: 1 }, { duration: 1000 });

或者预定义"slow", "normal", and "fast"

$element.velocity({ opacity: 1 }, { duration: "slow" });

2、easing动画效果

首先要引入velocity.ui.js

参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.

参考

1）、单独方式

/* Use one of the jQuery UI easings. */$element.velocity({ width: 50 }, "easeInSine");/* Use a custom bezier curve. */$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);/* Use spring physics. */$element.velocity({ width: 50 }, [ 250, 15 ]);/* Use step easing. */$element.velocity({ width: 50 }, [ 8 ]);

2）、集合方式

$element.velocity({    borderBottomWidth: [ "2px", "spring" ], // Uses "spring"    width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics    height: "100px" // Defaults to easeInSine, the call's default easing}, {    easing: "easeInSine" // Default easing});

3）、自定义

使用$.Velocity.Easings扩展新的动画效果。

设置三个属性：

p: The call's completion percentage (decimal value).
opts (optional): The options object passed into the triggering Velocity call.
tweenDelta (optional): The difference between the animating property's ending value and its starting value.

$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {    return 0.5 - Math.cos( p * Math.PI ) / 2;};

3、queue队列

设置值为false，可以当前的动画并行执行。

/* Trigger the first animation (width). */$element.velocity({ width: "50px" }, { duration: 3000 }); // Runs for 3sfunction call">setTimeout(function() {    /* Will run in parallel starting at the 1500ms mark. */    $element.velocity({ height: "50px" }, { queue: false });}, 1500 // 1500ms mark);

4、begin动画开始之前发生

这个回调函数在动画发生之前执行一次，如果是一个循环的动画，该回调函数也只是执行一次。

$element.velocity({    opacity: 0}, {    /* Log all the animated divs. */    begin: function(elements) { console.log(elements); }});

5、complete动画执行完成发生

这个回调函数在动画完成之后执行一次，如果是一个循环的动画，该回调函数也只是执行一次。

$element.velocity({    opacity: 0}, {    /* Log all the animated divs. */    complete: function(elements) { console.log(elements); }});

6、progress动画执行过程是发生

四个参数：complete, remaining, start, and tweenValue:

complete: The call's completion percentage (as a decimal value).
remaining: How much time remains until the call completes (in ms).
start: The absolute time at which the call began (in Unix time).
tweenValue: The current value of the dummy tween animation property, which can optionally be passed into a Velocity call. The utility of passing in the tween animation property is that it allows you to then capture the exact value of its tween progression via theprogress callback. This dummy property, like all other Velocity animation properties, is subject to the call's easing behavior. Leveraging this tween property allows you to turn Velocity into a custom tweening engine so that you animate the change of arbitrary DOM properties.

$element.velocity({    opacity: 0,    tween: 1000 // Optional}, {    progress: function(elements, complete, remaining, start, tweenValue) {        console.log((complete * 100) + "%");        console.log(remaining + "ms remaining!");        console.log("The current tween value is " + tweenValue)    }});

如果tween不设置初始值，则默认为0

$element.velocity({    tween: [ 0, 1000 ]}, {    easing: "spring",    progress: function(elements, c, r, s, t) {        console.log("The current tween value is " + t)    }});

7、mobileHA

自动优化手机端，默认值为true。

对电脑端没什么影响。

$element.velocity(propertiesMap, { mobileHA: false });

8、loop动画循环次数

这个版本必要在1.2.0以上

$element.velocity({ height: "10em" }, { loop: 2 });//循环两次

如果值为true，即无限循环。

$element.velocity({ height: "10em" }, { loop: true });

9、delay动画延迟执行

$element.velocity({    height: "+=10em"}, {    loop: 4,    /* Wait 100ms before alternating back. */    delay: 100});

10、display&visibility

属性值和css的值一样，看情况使用不同的属性

/* Animate down to zero then set display to "none". */$element.velocity({ opacity: 0 }, { display: "none" });

/* Animate down to zero then set visibility to "hidden". */$element.velocity({ opacity: 0 }, { visibility: "hidden" });

/* Set display to "block" then animate from opacity: 0. */$element.velocity({ opacity: 1 }, { display: "block" });

八、命令command

1、fadeIn and fadeOut 淡入淡出

/* Set the element to a custom display value of "table". */ $element.velocity("fadeIn", { display: "table" });<strong></strong>

$element    .velocity("fadeIn", { duration: 1500 })    .velocity("fadeOut", { delay: 500, duration: 1500 });

2、slideUp and slideDown 向上向下滑动

$element    .velocity("slideDown", { duration: 1500 })    .velocity("slideUp", { delay: 500, duration: 1500 });

3、scroll滚动

$element    .velocity("scroll", { duration: 1500, easing: "spring" })    .velocity({ opacity: 1 });

scroll有一个特有的属性container，而且这container 元素必须有CSS position属性【relative, absolute, fixed 除了static】

/* Scroll $element into view of $("#container"). */$element.velocity("scroll", { container: $("#container") });

scroll默认作用于Y 轴线axis，可以改变

/* Scroll the browser to the LEFT edge of the targeted div. */$element.velocity("scroll", { axis: "x" });

scroll另外一个特有的属性offset

$element    /* Then scroll to a position 250 pixels BELOW the div. */    .velocity("scroll", { duration: 750, offset: 250 })    /* Scroll to a position 50 pixels ABOVE the div. */    .velocity("scroll", { duration: 750, offset: -50 });

4、stop结束当前动画【包括并行执行的动画，即设置queue:false的动画】

这个版本必要在1.2.0以上

$element.velocity("stop"); // Normal stop$element.velocity("stop", "myQueue"); // Custom queue stop

设置reverse属性，可以返回初始属性。

/* Prior Velocity call. */$element.velocity({ opacity: 0 });/* Later, midway through the call... */$element    /* Stop animating opacity. */    .velocity("stop")    /* Animate opacity back to 1. */    .velocity("reverse");

$element.velocity("stop");停止当前的动画，但是会执行到最终设置得效果。

$element.velocity("stop",true);停止当前以及后续动画，保持初始值。

/* Prior Velocity calls. */$element    .velocity({ width: 100 }, 1000)    .velocity({ height: 200 }, 1000);/* Called immediately after. */$element.velocity("stop", true);

停止多个元素的动画效果。

If you want per-element stop control in a multi-element animation, perform the animation by calling Velocity once on each element.

/* Prior Velocity call. */$allElements.velocity({ opacity: 0 });/* Stop the above call. */$allElements.velocity("stop");or/* Behaves like above since it's ending a multi-element call. */$firstElement.velocity("stop");

g

5、finish

停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

这个版本必要在1.2.0以上

$element.velocity("finish");

.stop()将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值

6、reverse返回初始属性

$element.velocity("reverse");or$element.velocity("reverse", { duration: 2000 });

九、特性Feature

1、transforms css转变【参考css3的transforms】

/* Translate to the right and rotate clockwise. */$element.velocity({    translateX: "200px",    rotateZ: "45deg"});

2、colors颜色

这个版本必要在1.2.0以上

有四个属性：
color:字体颜色

backgroundColor：背景颜色

borderColor：边框颜色

outlineColor：外边框颜色

$element.velocity({    /* Animate a color property to a hex value of red... */    backgroundColor: "#ff0000",    /* ... with a 50% opacity. */    backgroundColorAlpha: 0.5,    /* Animate the red RGB component to 50% (0.5 * 255). */    colorRed: "50%",    /* Concurrently animate to a stronger blue. */    colorBlue: "+=50",    /* Fade the text down to 85% opacity. */    colorAlpha: 0.85});

3、SVG可缩放矢量图形

这个版本必要在1.2.0以上

$svgRectangle.velocity({    /* Coordinate animation works. */    x: 200,    r: 25,    /* 2D transforms work. */    translateX: "200px",    /* 3D transforms work in non-IE browsers. */    translateZ: "200px",    /* "Fill" color animation works. */    fill: "#ff0000",    strokeRed: 255,    strokeGreen: 0,    strokeBlue: 0,    /* Some standard CSS properties work. */    opacity: 1,    width: "50%"});

4、hook挂钩

这个版本必要在1.2.0以上

一般一个属性集合，如background:0px 0px 0px black",hook可以单独的操作这些个别的属性。

e.g. textShadowX, textShadowY, and textShadowBlur

$element.velocity({ textShadowBlur: "10px" });

设置值

$.Velocity.hook($element, "translateX", "500px"); // Must provide unit type$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // Must provide unit type

获取值

$.Velocity.hook($element, "translateX");$.Velocity.hook(elementNode, "textShadowBlur");

注：当使用hook函数时，需要使用的单位必须提供可接受的单位，如px, deg, 等

5、promises

这个版本必要在1.2.0以上

/* Using Velocity's utility function... */$.Velocity.animate(element, { opacity: 0.5 })    /* Callback to fire once the animation is complete. */    .then(function(elements) { console.log("Resolved."); })    /* Callback to fire if an error occurs. */    .catch(function(error) { console.log("Rejected."); });

6、mock

这个版本必要在1.2.0以上

调整动画执行速度

$.Velocity.mock = true;//没有动画效果，直接显示结果

/* Slow down all animations by a factor of 10. */$.Velocity.mock = 10;//执行速度放缓10倍

7、Utility Function
这个版本必要在1.2.0以上

/* Standard multi-argument syntax. */var divs = document.getElementsByTagName("div");$.Velocity(divs, { opacity: 0 }, { duration: 1500 });

/* Alternative single-argument syntax (ideal for CoffeeScript). <i>e</i> stands for elements, <i>p</i> for properties, and <i>o</i> for options: */var divs = document.getElementsByTagName("div");$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });

8、Value Functions 属性function

$element.velocity({    opacity: function() { return Math.random() }});

$element.velocity({    translateX: function(i, total) {        /* Generate translateX's end value. */        return i * 10;    }});

9、Forcefeeding

$element.velocity({    /* Two-item array format. */    translateX: [ 500, 0 ],    /* Three-item array format with a per-property easing. */    opacity: [ 0, "easeInSine", 1 ]});

如果数组参数有两个值，从右到左开始执行，第二个值为初始值，第一值为终止值

如果数组参数有三个值，从右到左开始执行，第三个值为初始值，第二值为动画效果，第一值为终止值

Be sure to forcefeed only at the start of an animation, not between chained animations (where Velocity already does value caching internally):确保在开始的动画中执行，不能链接动画中使用。

$element    /* Optionally forcefeed here. */    .velocity({ translateX: [ 500, 0 ] })    /* Do not forcefeed here; 500 is internally cached. */    .velocity({ translateX: 1000 });

十、Plugins

1、UI Pack

1）Sequence Running序列运行

如果多个元素连续执行动画，我们可以使用这种方法

$element1.velocity({ translateX: 100 }, 1000, function() {    $element2.velocity({ translateX: 200 }, 1000, function() {        $element3.velocity({ translateX: 300 }, 1000);    });});

可是以上方法，在元素不对增加的时候，闲的代码很混乱，也很难管理。

于是产生了一种新的方法，如下

1、定义

var mySequence = [    { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },    { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },    { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }];

2、调用

$.Velocity.RunSequence(mySequence);

2)Effects: Pre-Registered预定义

$elements.velocity("callout.bounce");

具体效果，请看官网

3）Effects: Registration 自定义

新版们添加的

$.Velocity.RegisterEffect(name, {    defaultDuration: duration,    calls: [        [ { property: value }, durationPercentage, { options } ],        [ { property: value }, durationPercentage, { options } ]    ],    reset: { property: value, property: value }});

例子1

定义

$.Velocity.RegisterEffect("callout.pulse", {    defaultDuration: 900,    calls: [        [ { scaleX: 1.1 }, 0.50 ],        [ { scaleX: 1 }, 0.50 ]    ]});

调用

$element.velocity("callout.pulse");

例子二

/* Registration */$.Velocity    .RegisterEffect("transition.flipXIn", {        defaultDuration: 700,        calls: [            [ { opacity: 1, rotateY: [ 0, -55 ] } ]        ]    });    .RegisterEffect("transition.flipXOut", {        defaultDuration: 700,        calls: [            [ { opacity: 0, rotateY: 55 } ]        ],        reset: { rotateY: 0 }    });

/* Usage */$element    .velocity("transition.flipXIn")    .velocity("transition.flipXOut", { delay: 1000 });

自此，具体使用方法请参看官方文档。

0 0