Animo.js jQuery插件管理CSS動畫

Animo.js 是一個用於管理 CSS 動畫的小工具。
它的功能包括：堆棧動畫(串接動畫)，創建跨瀏覽器的模糊效果，設置動畫完成的回調等。
Animo.js 例中包含了 animate.css 動畫庫，提供了近 60 個非常漂亮的動畫效果，此外還可結合含一些輔助動畫。

目前 Animo.js 以 jQuery 為主沒有在開發了(只到1.3版本)，現在的展示頁面也以 JavaScript 為主，主標題 Animo is a powerful little tool for managing transitions and animations with JavaScript ( Animo是一個強大的小工具，用於使用JavaScript管理轉換和動畫 )。

animo.js 展示地址
目前展示頁面連結
 舊展示頁面，直接導回 labs.bigroomstudios.com
github 與下戴網址
https://github.com/ThrivingKings/animo.js (jQuery – 1.3版本)
https://github.com/ThrivingKings/animo/ (javascript – 1.7版本)

如何引入

引入 animate + animo css 檔

引入動畫庫，animate + animo.css 為展示範例與 animate.css 的整合檔。

<link href="animate+animo.css" rel="stylesheet" type="text/css">
// or
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

// or

引入 jQuery 與 animo JS 檔

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/animo.js/1.0.3/animo.min.js" type="text/javascript"></script>

1 2	<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script> <script src="https://cdn.bootcss.com/animo.js/1.0.3/animo.min.js" type="text/javascript"></script>

使用 jQuery 2 或更高版本。
animo 代碼包括專門為 animate.css 上製作的動畫，可以使用任何想要的動畫樣式。

在開發專案中有使用上 jquery-1.11.0 版本，目前是沒有太大的問題，大約比較了一下與用上 jquery-2 動畫順暢度還是有差。

核心功能

Animations

$(element).animo({
  // [string]/[array] class name(s) of the css animation,
  animation: "name", // or ["name1", "name2", "name3"]
  // [float] time (in seconds) for the animation to last during 1 iteration
  duration: 0.8,
  // [int] number of times the animation shall repeat itself
  // 動畫的時間長度
  iterate: 1,
  // [string] how the animation should progress over the duration of each cycle
  // 重複次數
  timing: "linear",
  // [boolean] whether or not to "cleanse" the element after the animation has completed
  // 動畫的時間類型
  keep: false
  // 是否接續下個動畫，等到整個函式內動畫完成在結束
} [,function]);

$(element).animo({

// [string]/[array] class name(s) of the css animation,

animation: "name", // or ["name1", "name2", "name3"]

// [float] time (in seconds) for the animation to last during 1 iteration

duration: 0.8,

// [int] number of times the animation shall repeat itself

// 動畫的時間長度

iterate: 1,

// [string] how the animation should progress over the duration of each cycle

// 重複次數

timing: "linear",

// [boolean] whether or not to "cleanse" the element after the animation has completed

// 動畫的時間類型

keep: false

// 是否接續下個動畫，等到整個函式內動畫完成在結束

} [,function]);

Blur

// Specifying options
$(element).animo("blur", {
	// [int] radius of the blur
	amount: 3,
	// [float] time (in seconds) from focus to blur
	duration: 0.6,
	// [float] time (in seconds) to automatically focus after blur
	focusAfter: 3.5,
} [,function]);

// Using defaults
$(element).animo("blur" [,function]);

// Specifying options

$(element).animo("blur", {

// [int] radius of the blur

amount: 3,

// [float] time (in seconds) from focus to blur

duration: 0.6,

// [float] time (in seconds) to automatically focus after blur

focusAfter: 3.5,

} [,function]);

// Using defaults

$(element).animo("blur" [,function]);

Focus

// Removes blur effect on an element immediately
$(element).animo("focus");

1 2	// Removes blur effect on an element immediately $(element).animo("focus");

Rotate

// Specifying options
$(element).animo("rotate", {
	// [int] degrees from origin to rotate element
	degrees: 15,
	// [float] time (in seconds) to complete rotation
	duration: 0.6
} [,function]);

// Using defaults
$(element).animo("rotate" [,function]);

// Specifying options

$(element).animo("rotate", {

// [int] degrees from origin to rotate element

degrees: 15,

// [float] time (in seconds) to complete rotation

duration: 0.6

} [,function]);

// Using defaults

$(element).animo("rotate" [,function]);

Cleanse

// Removes all references to animo effects
$(element).animo("cleanse");

1 2	// Removes all references to animo effects $(element).animo("cleanse");

實做演示

animo.js-基本class動畫套用

$(function(){
	$("a").click(function(){
		$(".box").animo({animation:'tada'})
	})
})

$(function(){

$("a").click(function(){

$(".box").animo({animation:'tada'})

})

See the Pen animo.js-基本class動畫套用 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

animo.js-class動畫與動畫串接

$(function(){
		$("a").click(function(){
				$('.box').animo({ animation: ['shake','bounce'],duration:1})
		})
})

$(function(){

$("a").click(function(){

$('.box').animo({ animation: ['shake','bounce'],duration:1})

})

See the Pen animo.js-class動畫與動畫串接 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

animo.js-不同元素動畫串接

$(function(){
	$("a").click(function(){
		$(".box1").animo({animation:'bounceInLeft',duration:1},function(){
			$('.box2').animo({animation:'bounceInRight',duration:1});
		})
	})
})

$(function(){

$("a").click(function(){

$(".box1").animo({animation:'bounceInLeft',duration:1},function(){

$('.box2').animo({animation:'bounceInRight',duration:1});

})

See the Pen animo.js-不同元素動畫串接 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

animo.js-模糊效果

$(function(){
	$(".a1").click(function(){
		$(".google-logo").animo('blur',{duration:3,amount:10})
	})
	$(".a2").click(function(){
		$(".google-logo").animo('focus')
	})
})

$(function(){

$(".a1").click(function(){

$(".google-logo").animo('blur',{duration:3,amount:10})

})

$(".a2").click(function(){

$(".google-logo").animo('focus')

})

See the Pen animo.js-模糊效果 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

無限迴圈動畫

iterate: "" 的 "" 內可指定次數， infinite 的值為無限迴圈的動畫。

$(".a1").click(function(){
	$(".box1").animo({animation:"spinner",iterate:2});
	$(".box2").animo({animation:"spinner",iterate:2});
	$(".box3").animo({animation:"spinner",iterate:2});
	$(".box4").animo({animation:"spinner",iterate:"infinite"});
})
// 清除動畫
function spin() {
	$('.box').animo("cleanse")
}

$(".a1").click(function(){

$(".box1").animo({animation:"spinner",iterate:2});

$(".box2").animo({animation:"spinner",iterate:2});

$(".box3").animo({animation:"spinner",iterate:2});

$(".box4").animo({animation:"spinner",iterate:"infinite"});

})

// 清除動畫

function spin() {

$('.box').animo("cleanse")

}

See the Pen animo.js-動畫次數與重覆 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

animo.js-動畫串接與保持動畫

$(function(){
	$("a").click(function(){

		$('#a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
			$('#n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {
				$('#i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {
					$('#m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
						$('#o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}); 
					});
				});
			});
		});

		// Fading in
		setTimeout(function(){
			$('#a').animo({animation: "fadeInLeft", duration: 0.5}, function() {
				$('#n').animo({animation: "fadeInUp", duration: 0.5}, function() {
					$('#i').animo({animation: "fadeInDown", duration: 0.5}, function() {
						$('#m').animo({animation: "fadeInLeft", duration: 0.5}, function() {
							$('#o').animo({animation: "fadeInRight", duration: 0.5});
						});
					});
				});
			});
		},2800)

	})
})

$(function(){

$("a").click(function(){

$('#a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {

$('#n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {

$('#i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {

$('#m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {

$('#o').animo({animation: "fadeOutRight", duration: 0.5, keep: true});

});

// Fading in

setTimeout(function(){

$('#a').animo({animation: "fadeInLeft", duration: 0.5}, function() {

$('#n').animo({animation: "fadeInUp", duration: 0.5}, function() {

$('#i').animo({animation: "fadeInDown", duration: 0.5}, function() {

$('#m').animo({animation: "fadeInLeft", duration: 0.5}, function() {

$('#o').animo({animation: "fadeInRight", duration: 0.5});

});

},2800)

})

See the Pen animo.js-動畫串接與保持動畫 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

animo.js-degrees角度一旋轉

/* rotate-all-45deg */
$('#rotate-all-45deg').on("click", function() {
	$('.rotate').animo("rotate", { degrees: 45 });
});
/* /rotate-all-45deg */

/* Rotate-two-then-the-others */
$('#Rotate-two-then-the-others').on("click", function() {
	
	$('#demo5, #demo8').animo('rotate', { degrees: -30 }, function() { 
		$('#demo6, #demo7').animo('rotate', {degrees: -15})
	});
	
});
/* Rotate-two-then-the-others */
	
/* #rotate_run */
$('#rotate_run').on("click", function() {
	$('#demo5').animo("rotate", {degrees:90}, function() {
		$('#demo6').animo("rotate", {degrees:90}, function() {
			$('#demo7').animo("rotate", {degrees:90}, function() {
				$('#demo8').animo("rotate", {degrees:90});
			});
		});
	});
});
/* /#rotate_run */

/* #rotate_run_flip */
$('#rotate_run_flip').on("click", function() {
	$('#demo5').animo("rotate", {degrees:90}, function(e) {
		e.element.animo({animation: "flipOutX", keep: true});
		$('#demo6').animo("rotate", {degrees:90}, function(e) {
			e.element.animo({animation: "flipOutY", keep: true});
			$('#demo7').animo("rotate", {degrees:90}, function(e) {
				e.element.animo({animation: "flipOutX", keep: true});
				$('#demo8').animo("rotate", {degrees:90}, function(e){
					e.element.animo({animation: "flipOutY", keep: true});
				});
			});
		});
	});
});
/* /#rotate_run_flip */

/* cleanse */
$('#cleanse').on("click", function() {
	$('.rotate').animo('cleanse');
});
/* /cleanse */

/* rotate-all-45deg */

$('#rotate-all-45deg').on("click", function() {

$('.rotate').animo("rotate", { degrees: 45 });

});

/* /rotate-all-45deg */

/* Rotate-two-then-the-others */

$('#Rotate-two-then-the-others').on("click", function() {

$('#demo5, #demo8').animo('rotate', { degrees: -30 }, function() {

$('#demo6, #demo7').animo('rotate', {degrees: -15})

});

/* Rotate-two-then-the-others */

/* #rotate_run */

$('#rotate_run').on("click", function() {

$('#demo5').animo("rotate", {degrees:90}, function() {

$('#demo6').animo("rotate", {degrees:90}, function() {

$('#demo7').animo("rotate", {degrees:90}, function() {

$('#demo8').animo("rotate", {degrees:90});

});

/* /#rotate_run */

/* #rotate_run_flip */

$('#rotate_run_flip').on("click", function() {

$('#demo5').animo("rotate", {degrees:90}, function(e) {

e.element.animo({animation: "flipOutX", keep: true});

$('#demo6').animo("rotate", {degrees:90}, function(e) {

e.element.animo({animation: "flipOutY", keep: true});

$('#demo7').animo("rotate", {degrees:90}, function(e) {

e.element.animo({animation: "flipOutX", keep: true});

$('#demo8').animo("rotate", {degrees:90}, function(e){

e.element.animo({animation: "flipOutY", keep: true});

});

/* /#rotate_run_flip */

/* cleanse */

$('#cleanse').on("click", function() {

$('.rotate').animo('cleanse');

});

/* /cleanse */

See the Pen animo.js-degrees角度一旋轉 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

資料來源

HTML5王新 animo.js 使用方法詳解

標籤雲

文章段落

Animo.js jQuery插件管理CSS動畫

如何引入

引入 animate + animo css 檔

引入 jQuery 與 animo JS 檔

核心功能

Animations

Blur

Focus

Rotate

Cleanse

實做演示

animo.js-基本class動畫套用

animo.js-class動畫與動畫串接

animo.js-不同元素動畫串接

animo.js-模糊效果

無限迴圈動畫

animo.js-動畫串接與保持動畫

animo.js-degrees角度一旋轉

資料來源

標籤雲

#ezw_tco-2 .ez-toc-title{ font-size: 120%; ; ; } #ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active{ background-color: #ededed; } 文章段落

如何引入

引入 animate + animo css 檔

引入 jQuery 與 animo JS 檔

核心功能

Animations

Blur

Focus

Rotate

Cleanse

實做演示

animo.js-基本class動畫套用

animo.js-class動畫與動畫串接

animo.js-不同元素動畫串接

animo.js-模糊效果

無限迴圈動畫

animo.js-動畫串接與保持動畫

animo.js-degrees角度一旋轉

資料來源

文章段落