Photoshop设计炫酷的蓝色UI界面教程
作者：畅游VC
字体：[ ] 来源：优设 时间：07-29 14:51:47
本教程是向大家介绍利用Photoshop设计绚丽的蓝色UI界面，制作出来的UI界面非常漂亮，教程难度不是很大，对于从事游戏UI设计和电商设计的同学非常值得阅读学习。虽然最终效果可能不符合你的需求，但最重要的是学习制作的思路和方法，推荐过来，希望大家有所收获
本教程是向大家介绍利用Photoshop设计绚丽的蓝色UI界面，制作出来的UI界面非常漂亮，教程难度不是很大，对于从事游戏UI设计和电商设计的同学非常值得阅读学习。虽然最终效果可能不符合你的需求，但最重要的是学习制作的思路和方法，推荐过来，希望大家有所收获。
先看一下最终效果
1.创建画布
新建一张790*400的画布(不要忘记文件命名哈~)
2.制作背景
Alt+Delete 填充背景色为 #1c46e3，并为其添加渐变叠加图层样式 (如下图所示)
3.创建界面底托
选择圆角矩形工具，创建 250*90\圆角半径2像素 的白色圆角矩形，并为其添加 图层样式 (如下图所示)
到此为止的效果如下图~(亲，你有跟上节奏吗)
4.为底托添加效果
新建图层，选择椭圆选区工具画一个如下图的选区，并进行羽化(50px) ,Alt+Delete填充黑色 (如下图所示)
将绘制好的&黑色羽化图形& Ctrl+T 变得扁一些 (如下图所示)
为该图层添加蒙版结合画笔和选区工具制作 (如下图所示)
调整为柔光模式 (如下图所示)
5.制作彩色Loading条
矩形工具绘制288*2的矩形，并为其添加 渐变叠加图层样式 ，在其下绘制1PX黑色直线 (如下图所示)
6.现在给整个界面增加细节
这一步主要是通过直线工具和选取工具对界面进行细化 (如下图所示)
大家可以按照上述方法绘制其余的细节(效果如下图)
7.为界面添加文字，并将loading修改到36%状态
加入文案，为其添加1px修饰效果，将彩色loading添加图层蒙版，做成36%状态 (如下图所示)
8.为Loading添加加载时的预期动画效果
这里主要是灵活运用选区工具，画笔工具，铅笔工具(铅笔工具作用于绘制1px点)进行仿光效绘制 (如下图所示)
9.放上自己心爱的小icon，做适当修饰~
因为整个界面风格是简约风，所以在选择icon的时候也要选用风格相对一致的哟 (如下图所示)
10.最后为icon和文字添加光效修饰，再加入属于你自己的印记，大功告成~
教程结束，以上就是Photoshop设计炫酷的蓝色UI界面教程，希望大家看完之后会有所帮助，谢谢大家观看本教程！
大家感兴趣的内容
12345678910
最近更新的内容个性炫酷秘籍 Win8.1锁屏设置小技巧
日 00:51&&&出处：&& 作者:马承平&& 编辑:马承平 分享
　　 了解Win8操作系统的朋友都知道，炫酷是该系统最大亮点，而如今进化到Win8.1后更多便利设置让你的桌面更潮流个性，今天小编就向大家介绍一个关于如果让锁屏界面彰显个性化的设置教程。
　　 首先想要在Win8.1系统上设置锁屏界面，您无需记住各种繁琐的步骤与选项，只需在Metro界面下敲击“锁屏”两字即可，随之系统便会自动打开搜索工具，找到相关设置项了。下图所示，会出现很多相关选项，以及第二部分与“锁屏”有关的快捷键提示。
　　 然后我们选择上图的第一项，系统就会进入和设备大项的锁屏界面小项。除了传统的锁屏图片外还有底下的“锁屏界面上放映幻灯片”项选择打开。
　　 选择打开后，果然N多选项让你发挥个性：
　　 然后当你按下Win键+L键后，稍等2秒后就会出现你设置好的文件夹或者来自“SkyDrive”的图片。
　　 当然，这里你还可在锁屏界面上设置仍需显示的应用，同时在非解锁状态下仍 可使用摄像头拍照。
　　 需要拍照的时候，只需你在锁屏界面向下滑动就会出现如下图左侧的照提示。
　　 然后通过简单设置，你就可利用摄像头照相或者摄像了，无需解锁，图片会默认保存到图片库的“本机照片”文件夹下。
　　 是不是感觉自己电脑锁屏时可以更加个性化了？让我们来回顾下是如何找到锁屏设置项，以及设置时候应该小注意哪些的。
　　 1、只在Metro界面打字输入“锁屏”两个字（无需调出搜索工具栏）。
　　 2、进入锁屏设置界面，打开幻灯片播放选项
　　 3、打开“使用”选项让你可以不解锁的情况下使用摄像头，然后图片被保存在图片库的“本机照片”中。■
汽车之家内容精选
每日精选19456 编辑宋宋和大国推出的脱口秀节目3267玩客 最好玩的活动与试用平台 93135编辑部的故事 326泡美美 分享最美科技 4197科技生活@他山之眼 ：在上一期教程中，我们介绍了如何制作星球特效，今天，我们介绍一下如何制作九重天特效。所谓九重天特效，是指具有很强的层次感和空间感，整体效果夸张而又震撼的画面效果，其突出特征为画面充满着扭曲感觉，整体向中心聚拢。炫酷duang~魔幻guang~喜欢这特效吗？戳~???　
　文章为作者独立观点，不代表微头条立场
的最新文章
【优设投稿请加微信：acewoosdc】【优设投稿请加微信：acewoosdc】【优设投稿请加微信：acewoosdc】【优设投稿请加微信：acewoosdc】【优设投稿请加微信：acewoosdc】<a href="/tag/109.ht超炫酷的图片切换插件Slider Revolution-网页前沿，专注于网页前端资源和学习的综合性网站！
您已经选择的：
网页前沿，网页前端的好帮手！
超炫酷的图片切换插件Slider Revolution
22:55:42Hit:361
这里给大家介绍一款基于jQuery库的，功能非常强大的图片切换插件Slider Revolution，它充分响应，支持移动设备，支持手机触摸，键盘翻页；它内置幻灯、视频播放计时器，它拥有各种模式：自定义，自动响应，全屏；它有多种动画效果、3d效果...总之你想到的效果它都做到了。 HTMLSlider Revolution是一款基于jQuery的插件，使用它时需要先载入jQuery库文件，以及Slider Revolution依赖的css和js文件。&script&src=&js/jquery.js&&&/script&&&link&rel=&stylesheet&&&href=&css/style.css&&media=&screen&&/&&&script&src=&rs-plugin/js/jquery.themepunch.plugins.min.js&&&/script&&&script&src=&rs-plugin/js/jquery.themepunch.revolution.min.js&&&/script&内容切换的主体html结构如下，由div.tp-banner包含多个&li&标签，&li&中放置切换的内容，包括主要图片、文字、按钮信息。这些信息配上各自的data-属性，是为了让Slider Revolution识别。&div&class=&tp-banner-container&&&
&&&&&div&class=&tp-banner&&&&
&&&&&&&&&ul&&
&&&&&&&&&&&&&!--&SLIDE&&--&&
&&&&&&&&&&&&&li&data-transition=&fade&&data-slotamount=&7&&data-masterspeed=&1500&&&&
&&&&&&&&&&&&&&&&&!--&MAIN&IMAGE&--&&
&&&&&&&&&&&&&&&&&img&src=&images/bg1.jpg&&&alt=&slidebg1&&&data-bgfit=&cover&&data-bgposition=&left&top&&data-bgrepeat=&no-repeat&&&
&&&&&&&&&&&&&&&&&!--&LAYERS&--&&
&&&&&&&&&&&&&&&&&!--&LAYER&NR.&1&--&&
&&&&&&&&&&&&&&&&&div&class=&tp-caption&lightgrey_divider&skewfromrightshort&fadeout&&
&&&&&&&&&&&&&&&&&&&&data-x=&85&&
&&&&&&&&&&&&&&&&&&&&data-y=&224&&
&&&&&&&&&&&&&&&&&&&&data-speed=&500&&
&&&&&&&&&&&&&&&&&&&&data-start=&1200&&
&&&&&&&&&&&&&&&&&&&&data-easing=&Power4.easeOut&&My&Caption&
&&&&&&&&&&&&&&&&&/div&&
&&&&&&&&&&&&&&&&...&
&&&&&&&&&&&&&/li&&
&&&&&&&&&&&&&li&data-transition=&zoomout&&data-slotamount=&7&&data-masterspeed=&1000&&&&
&&&&&&&&&&&&&&&&&!--&MAIN&IMAGE&--&&
&&&&&&&&&&&&&&&&&img&src=&images/bg2.jpg&&&alt=&darkblurbg&&&data-bgfit=&cover&&data-bgposition=&left&top&&data-bgrepeat=&no-repeat&&&
&&&&&&&&&&&&&&&&&!--&LAYERS&--&&
&&&&&&&&&&&&&&&&&!--&LAYER&NR.&1&--&&
&&&&&&&&&&&&&&&&&div&class=&tp-caption&lightgrey_divider&skewfromrightshort&fadeout&&
&&&&&&&&&&&&&&&&&&&&data-x=&85&&
&&&&&&&&&&&&&&&&&&&&data-y=&224&&
&&&&&&&&&&&&&&&&&&&&data-speed=&500&&
&&&&&&&&&&&&&&&&&&&&data-start=&1200&&
&&&&&&&&&&&&&&&&&&&&data-easing=&Power4.easeOut&&My&Caption&
&&&&&&&&&&&&&&&&&/div&&
&&&&&&&&&&&&&&&&...&
&&&&&&&&&&&&&/li&&
&&&&&&&&&&&&....&
&&&&&&&&&/ul&&
&&&&&/div&&&/div&jQuery调用HTML结构布置好后，就可以调用Slider Revolution插件了，贴上以上代码后，打开浏览器就可以看到切换效果了。$(function()&{&
&&&&$(&#39;.tp-banner&#39;).revolution({&
&&&&&&&&delay:9000,&
&&&&&&&&startwidth:1170,&
&&&&&&&&startheight:500,&
&&&&&&&&hideThumbs:10&
});选项设置与说明Slider Revolution提供了很多参数选项设置：delay: 滑动内容停留时间。默认9000毫秒startheight: 滑动内容高度，默认490像素。startwidth: 滑动内容宽度，默认890像素。navigationType: 显示翻页图标，默认“bullet”（圆点），如果设置为“none”则不显示。。navigationArrows: 显示翻页箭头，默认nexttobullets，即鼠标滑向时显示左右翻页箭头，如果设置为none则不显示。touchenabled: 是否允许触摸滑动，默认on即允许，如果设置为off则不允许。onHoverStop: 是否开启鼠标滑向时暂停，on：开启，off：关闭。fullWidth: 是否开启全屏展示图片内容，on：开启，off：关闭。对于每个&li&标签可以设置各种效果：data-transition: 内容滑动效果，可以设置以下值：boxslide，boxfade，slotzoom-horizontal，slotslide-horizontal，slotfade-horizontal，slotzoom-vertical，slotslide-vertical，slotfade-vertical，curtain-1，curtain-2，curtain-3，slideleft，slideright，slideup，slidedown，fadedata-slotamount: 切换时被分成的方形块数。data-link: 图片链接data-delay: 设置当前滑块内容的停留时间对于每个li里面的元素，可以设置以下选项来实现各种效果。动画样式，class属性: class属性值代表不同的动画样式：sft - Short from Top sfb - Short from Bottom，sfr - Short from Right，sfl - Short from Left，lft - Long from Top，lfb - Long from Bottom，lfr - Long from Right，lfl - Long from Left，fade - fadingdata-x: 当前元素相对li的横向位移data-y : 当前元素相对li的纵向位移data-speed: 动画时间，毫秒data-start after: 当前元素等待几秒后再显示data-easing: 缓冲动画，有easeOutBack...多种动画效果，可参照此外，如果要加上时间线作为一个定时器，可以在滑动内容的末尾加上以下代码：&div&class=&tp-bannertimer&&&/div&是不是很方便好用，快来试一试吧！
评论专区(0)
平均得分：
给这篇文章评个分：制作炫酷的专题页面 - 推酷
制作炫酷的专题页面
很多时候，我们需要一些炫酷的动画效果，让页面更加吸引用户的眼球，现有比较好用的JS动画库有：velocity和GSAP(支持falsh和js)。今天这里主要学习的是velocity配合css3动画，快速打造属于你的专题页面。
PS：发现各种炫酷的效果都是由这些简单的动作通过组合实现的，发现最终效果和动画的设计者有很大关系，鄙人就属于那种不怎么懂设计的人，这里只是抛砖引玉。
虽然我今天不准备详细介绍GSAP这个动画库，但是还有有必要把相关资源的入口放在这里，供想要了解的 同学进行深入的 学习。
特性介绍：
最好的学习就是查看官方API文档，其次结合场景才会出现的问题，可以交流一下应该就可以解决。
废话不多说了，进入今天的正题。
velocity功能
包含$.animate()所有功能，并且包含切换、转换、循环、缓动、CSS切换、scroll功能，从效率角度来说，比CSS更高。
支持IE8+，chrome、firefox、android、ios（可以配置mobileMA，提升手机访问效果）
可以使用$.Velocity.defaults进行查看管理。
注：关于配置的使用说明，可以参考官方文档说明。其中begin、complete监听动画状态
支持两种书写方式
* @param {Object|String} 需要改变css属性最终状态值或者是注册动画
* @param {Object} 动画基本配置，可以查看默认配置
$element.velocity(properties, options)
* @param {Object} 操作元素，可以是原生对象，也可以是包装对象
* @param {Object|String} 需要改变css属性最终状态值或者是注册动画
* @param {Object} 动画基本配置，可以查看默认配置
$.Velocity($element, properties, options);
另：所有的属性值都可以是函数，返回最终的值
自定义动画效果
velocity提供了注册自定义动画的方法，方便使用者自定义，并进行方便多次使用
$.Velocity.RegisterEffect(name, {
defaultDuration: duration,
[ { property: value }, durationPercentage, { options } ],
[ { property: value }, durationPercentage, { options } ]
reset: { property: value, property: value }
来一个简单的例子：
$.Velocity.RegisterEffect(&callout.pulse&, {
defaultDuration: 900,
[ { scaleX: 1.1 }, 0.50 ],
[ { scaleX: 1 }, 0.50 ]
注册一个callout.pulse方法，如何进行使用呢？可以参照基础技能中的调用方式，这里使用其中一种方式
$elements.velocity('callout.pulse'); //相当于是properties参数值
UI pack--动画包
官方提供一些动画包，可以直接进行使用，也可以通过自定义注册动画，然后进行使用。
现有的的动画效果有：
callout.bounce,callout.shake,callout.flash,callout.pulse,callout.swing,callout.tada,transition.fadeIn,transition.fadeOut,transition.flipXIn,transition.flipXOut,transition.flipYIn,transition.flipYOut,transition.flipBounceXIn,transition.flipBounceXOut,transition.flipBounceYIn,transition.flipBounceYOut,transition.swoopIn,transition.swoopOut,transition.whirlIn,transition.whirlOut,transition.shrinkIn,transition.shrinkOut,transition.expandIn,transition.expandOut,transition.bounceIn,transition.bounceOut,transition.bounceUpIn,transition.bounceUpOut,transition.bounceDownIn,transition.bounceDownOut,transition.bounceLeftIn,transition.bounceLeftOut,transition.bounceRightIn,transition.bounceRightOut,transition.slideUpIn,transition.slideUpOut,transition.slideDownIn,transition.slideDownOut,transition.slideLeftIn,transition.slideLeftOut,transition.slideRightIn,transition.slideRightOut,transition.slideUpBigIn,transition.slideUpBigOut,transition.slideDownBigIn,transition.slideDownBigOut,transition.slideLeftBigIn,transition.slideLeftBigOut,transition.slideRightBigIn,transition.slideRightBigOut,transition.perspectiveUpIn,transition.perspectiveUpOut,transition.perspectiveDownIn,transition.perspectiveDownOut,transition.perspectiveLeftIn,transition.perspectiveLeftOut,transition.perspectiveRightIn,transition.perspectiveRightOut
具体效果可以查看最下面的例子。
自定义动画队列
官方提供了执行动画队列的方法，$.Velocity.RunSequence(animationArr);其中animationArr是动画数组，数组的每个元素是一个元素动画效果，具体例子如下：
var mySequence = [
{ elements: $element1, properties: { translateX: 100 }, options: { duration: 1000 } },
{ elements: $element2, properties: { translateX: 200 }, options: { duration: 1000, sequenceQueue: false },
{ elements: $element3, properties: { translateX: 300 }, options: { duration: 1000?}
$.Velocity.RunSequence(mySequence);
//默认队列动画是按照顺序执行的，可以通过设置sequenceQueue改变当前元素执行时机。默认是true，当为true时，指的是按照顺序执行，如果设置成false指的是，可以和上一个元素动画同时执行
支持promise
引入官方推荐的bluebird和when，即可采用如下使用方式：
$element.velocity(properties, options).then(); //需要注意是的是无线循环和队列不支持该形式
配合css3动画，达到最佳效果
友情提示：
& & velocity在进场和出场动画方面优势比较大，css3在循环动画上优势比较大。当然万恶的IE兼容问题
基于上面所讲到的，实现了一个基于jquery、velocity、animation.css实现的动画，仅供参考
* 动画处理
* author: 黑MAO
$(function() {
'use strict';
/****内部方法开始****/
* css动画执行函数
* @param {Object} 目标元素
* @param {String} 初始class
* @param {String} 动画类型
* @param {Number} 动画时长
* @param {Number} 动画延迟
* @param {Number} 循环次数
function _cssRun(targetEl, className, animation, duration, delay, loop) {
duration = duration*1 || 1000;
delay = delay*1 || 0;
loop = (loop || loop == 0) ? loop*1 : 1;
if(loop & 1) {
loop = 'infinite';
$(targetEl).removeClass();
$(targetEl).addClass(className).addClass(animation);
$(targetEl).css({
'animation-duration': duration+'ms',
'animation-delay': delay+'ms',
'animation-iteration-count': loop+''
if(loop != 'infinite') {
clearTimeout(timer);
timer = setTimeout(function() {
$(targetEl).removeClass(animation);
}, duration*loop + delay);
* 监听select变化方法
* @param {Object} 目标元素
* @param {Object} 操作元素集合
* @param {String} 初始class
* @param {String} 动画类型 [&css&, &js&]
function _changeFunc(targetEl, opElementObj, className, animationType) {
var animation = $(opElementObj.animationEl).val();
var duration = $(opElementObj.durationEl).val();
var delay = $(opElementObj.delayEl).val();
var loop = $(opElementObj.loopEl).val();
if(animationType == &css&) {
_cssRun(targetEl, className, animation, duration, delay, loop);
var ras = new Ras();
if(animation) {
ras.run(targetEl, 'stop');
ras.run(targetEl, animation, {duration: duration, delay: delay, stagger: 200, drag: true});
* 初始化动画
* @param {Array} 动画数组
* @param {Object} 操作元素对象
* @param {Object} 目标元素
* @param {Number} 动画延迟
* @param {String} 需要显示的动画类型 [&show&, &hide&, &normal&, &all&]
* @param {String} 动画类型 [&css&, &js&]
function _initAnimation(animationArr, opElementObj, targetEl, type, animationType) {
var conf = opElementO
var className = $(targetEl).attr(&class&);
$(conf.animationEl).prepend('&option value=&& diabled=&disabled&&选择动画类型&/option&');
$(animationArr).each(function(key, val) {
var isShow =
switch(type) {
case &show&:
if(val.indexOf('In') & 0) {
case &hide&:
if(val.indexOf('Out') & 0) {
case &normal&:
if(val.indexOf('Out') == -1 && val.indexOf('In') == -1) {
isShow && $(conf.animationEl).append('&option value=&'+val+'&&'+val+'&/option&');
$(conf.animationEl).on('change', function() {
_changeFunc(targetEl, conf, className, animationType);
$(conf.durationEl).on('change', function() {
_changeFunc(targetEl, conf, className, animationType);
$(conf.delayEl).on('change', function() {
_changeFunc(targetEl, conf, className, animationType);
$(conf.loopEl).on('change', function() {
_changeFunc(targetEl, conf, className, animationType);
/****内部方法结束****/
function Ras(opts) {
var conf = {
beforeIndex : 0, //上一页序列号
currentIndex : 0, //当前页序列号
playing : true, //是否在运行
downward : true, //是否向下滚动
imgList: [], //页面内图片列表
show: [], //页面显示列表
hide: [] //页面隐藏列表
navFunc: null, //导航回调函数
cssAnimationExtra: [], //css动画扩展
jsAnimationExtra: [] //js动画扩展
this.conf = $.extend(conf, opts);
//对外暴漏
window.Ras = R
$.extend(Ras.prototype, {
init: function() {
var self =
var conf = this.
//绑定键盘和鼠标事件
var quenes = conf.
var showList = conf.quenes.
var hideList = conf.quenes.
var senceNum = showList.
$(document).on('mousewheel keyup',function(e){
if( !conf.playing ){
conf.playing =
if( e.keyCode && (e.keyCode==39||e.keyCode==40)){
conf.downward =
if( e.keyCode && (e.keyCode==37||e.keyCode==38) ){
conf.downward =
if( e.deltaY){
conf.downward = e.deltaY&0?true:
if( e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.deltaY ){
conf.beforeIndex = conf.currentI
conf.currentIndex = conf.downward ?conf.currentIndex + 1:conf.currentIndex - 1;
conf.currentIndex = conf.currentIndex&=senceNum?0:conf.currentI
conf.currentIndex = conf.currentIndex&0?senceNum-1:conf.currentI
conf.navFunc && conf.navFunc(conf.currentIndex);
self.show(hideList[conf.beforeIndex], showList[conf.currentIndex], function() {
conf.playing =
//处理图片预加载
var imgList = conf.imgL
imgList.length && self.imgLoader(imgList);
//默认显示第一屏
self.show(null, showList[0], function() {
conf.playing =
* 初始化CSS动画
* @param {Object} 联动元素集合
* @param {Object} 目标元素
* @param {String} 选项类型 [&show&, &hide&, &normal&, &all&]
initCssAnimation: function(opElementObj, targetEl, type) {
var conf = this.
var animationStr = 'bounce,pulse,rubberBand,shake,swing,tada,bounceIn,bounceInDown,bounceInLeft,bounceInRight,bounceInUp,bounceOut,bounceOutDown,bounceOutLeft,bounceOutRight,bounceOutUp,fadeIn,fadeInDown,fadeInDownBig,fadeInLeft,fadeInLeftBig,fadeInRight,fadeInRightBig,fadeInUp,fadeInUpBig,fadeOut,fadeOutDown,fadeOutDownBig,fadeOutLeft,fadeOutLeftBig,fadeOutRight,fadeOutRightBig,fadeOutUp,fadeOutUpBig,flip,flipInX,flipInY,flipOutX,flipOutY,lightSpeedOut,rotateIn,rotateInDownLeft,rotateInDownRight,rotateInUpLeft,rotateInUpRight,rotateOut,rotateOutDownLeft,rotateOutDownRight,rotateOutUpLeft,rotateOutUpRight,hinge,rollIn,rollOut,zoomIn,zoomInDown,zoomInLeft,zoomInRight,zoomInUp,zoomOut,zoomOutDown,zoomOutLeft,zoomOutRight,zoomOutUp,slideInDown,slideInLeft,slideInRight,slideInUp,slideOutDown,slideOutLeft,slideOutRight,slideOutUp,magic,openDownLeft,openDownRight,openUpLeft,openUpRight,openDownLeftRetourn,openDownRightRetourn,openUpLeftRetourn,openUpRightRetourn,openDownLeftOut,openDownRightOut,openUpLeftOut,openUpRightOut,perspectiveDown,perspectiveLeft,perspectiveRight,perspectiveUp,perspectiveDownRetourn,perspectiveLeftRetourn,perspectiveRightRetourn,perspectiveUpRetourn,puffIn,puffOut,rotateDown,rotateLeft,rotateRight,rotateUp,slideDown,slideLeft,slideRight,slideUp,slideDownRetourn,slideLeftRetourn,slideRightRetourn,slideUpRetourn,swap,twisterInDown,twisterInUp,vanishIn,vanishOut,swashOut,swashIn,foolishOut,holeOut,tinRightOut,tinLeftOut,tinUpOut,tinDownOut,tinRightIn,tinUpIn,tinDownIn,bombRightOut,bombLeftOut,boingInUp,boingOutDown,spaceOutUp,spaceOutRight,spaceOutLeft,spaceInUp,spaceInRight,spaceInDown,spaceInLeft,boomIn,circleRotate';
var animationArr = animationStr.split(',');
var arr = [];
$.merge(arr, animationArr, conf.cssAnimationExtra);
arr = $.unique(arr);
_initAnimation(arr, opElementObj, targetEl, type, 'css');
* 初始化JS动画
* @param {Object} 联动元素集合
* @param {Object} 目标元素
* @param {String} 选项类型 [&show&, &hide&, &normal&, &all&]
initJsAnimation: function(opElementObj, targetEl, type) {
var conf = this.
var animationStr = 'callout.bounce,callout.shake,callout.flash,callout.pulse,callout.swing,callout.tada,transition.fadeIn,transition.fadeOut,transition.flipXIn,transition.flipXOut,transition.flipYIn,transition.flipYOut,transition.flipBounceXIn,transition.flipBounceXOut,transition.flipBounceYIn,transition.flipBounceYOut,transition.swoopIn,transition.swoopOut,transition.whirlIn,transition.whirlOut,transition.shrinkIn,transition.shrinkOut,transition.expandIn,transition.expandOut,transition.bounceIn,transition.bounceOut,transition.bounceUpIn,transition.bounceUpOut,transition.bounceDownIn,transition.bounceDownOut,transition.bounceLeftIn,transition.bounceLeftOut,transition.bounceRightIn,transition.bounceRightOut,transition.slideUpIn,transition.slideUpOut,transition.slideDownIn,transition.slideDownOut,transition.slideLeftIn,transition.slideLeftOut,transition.slideRightIn,transition.slideRightOut,transition.slideUpBigIn,transition.slideUpBigOut,transition.slideDownBigIn,transition.slideDownBigOut,transition.slideLeftBigIn,transition.slideLeftBigOut,transition.slideRightBigIn,transition.slideRightBigOut,transition.perspectiveUpIn,transition.perspectiveUpOut,transition.perspectiveDownIn,transition.perspectiveDownOut,transition.perspectiveLeftIn,transition.perspectiveLeftOut,transition.perspectiveRightIn,transition.perspectiveRightOut';
var animationArr = animationStr.split(',');
var arr = [];
$.merge(arr, animationArr, conf.cssAnimationExtra);
arr = $.unique(arr);
_initAnimation(arr, opElementObj, targetEl, type, 'js');
* 入场动画
* @param {Array} 出场队列
* @param {Array} 入场队列
* @param {Function} 入场完成回调
show: function(beforeQuene, currentQuene, callback) {
var self =
self.hide(beforeQuene);
currentQuene && self.run(currentQuene).then(function() {
callback && callback();
* 出场动画
* @param {Array} 出场队列
* @param {Function} 出场完成回调
hide: function(quene, callback) {
var self =
callback && callback();
quene && self.run(quene);
* 图片懒加载
* @param {Array} 图片列表
* @param {Function} 图片加载回调
imgLoader: function(imgList, callback) {
var count = imgList.length,
success = 0,
failed = 0,
failList = [];
for ( ; i & i++ ) {
var img = new Image();
(function(i){
img.onload = function () {
success++;
if( (success + failed) == count ) {
callback&&callback.call( imgList , failed, failList);
img.onerror = function () {
failList.push(imgList[i]);
if( (success + failed) == count ) {
callback&&callback.call( imgList , failed, failList );
img.src = imgList[i];
* 注册自定义动画
register: function() {
var self =
var args = [].slice.apply(arguments);
$.Velocity.RegisterEffect.apply(self, args);
* 封装velocity方法，统一管理队列和单个动画
* @return {Object} promise对象
run: function() {
var deferred = $.Deferred();
var self =
var args = [].slice.call(arguments);
var len = args[0].
if($.isArray(args[0])) {
if(!args[0][len-1].options){
args[0][len-1].options = {};
args[0][len-1].plete = function() {
deferred.resolve();
$.Velocity.RunSequence.call(self, args[0]);
return deferred.promise();
return $.Velocity.animate.apply(self, args);
* 启动CSS动画
* @param {Object} 操作元素
* @param {String} 初始class
* @param {String} css动画
* @param {Number} 动画时长
* @param {Number} 动画延迟
* @return {Object} promise对象
cssAnimationRun: function(targetEl, className, animation, duration, delay, loop) {
loop = (loop === true) ? 0 :
_cssRun(targetEl, className, animation, duration, delay, loop);
* 启动JS动画
* @param {Object} 操作元素
* @param {String} css动画
* @param {Number} 动画时长
* @param {Number} 动画延迟
* @return {Object} promise对象
jsAnimationRun: function(targetEl, animation, options) {
var opts = {
stagger: 200,
drag: true
opts = $.extend(opts, options);
if(animation) {
this.run(targetEl, 'stop');
this.run(targetEl, animation, opts);
使用方式：
var ras = new Ras({
cssAnimationExtra: ['bounce'],
jsAnimationExtra: ['callout.bounce']
ras.init();
//调用相关方法
附录（资源地址）：
&link rel=&stylesheet& &href=&
!efd6dff2/animation.css&&
&script src=&
& &&/script&&
&script src=&
!/bluebird.js& &&/script&
&script src=&
!7c8590ec/jquery.mousewheel.min.js&&&/script&
&script src=&
!/velocity.min.js&&&/script&
&script src=&
!d0b08d4d/velocity.ui.min.js&&&/script&
参考资料：
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示}