paip.关于动画效果的原则 html js 框架总结
paip.关于动画效果的原则 html js 框架总结
2.1. Property effects 动态改变一个或多个目标对象的属性 (Animate、Fade, Resize, and AnimateColor) 4
2.2. Transform effects 缩入、旋转和位置的改变 .（Move, Rotate, and Scale）
4
2.3. Pixel-shader effects 主要是针对图片象素着色的动态效果 (CrossFade and Wipe) 4
2.5. 3D effects 3D 特效（Move3D、Rotate3D、Scale3D）
4
3.4. AnimateColor AnimateColor 效果 5
3.5. AnimateFilter Animate Filter 5
3.8. AnimateTransitionShader两个位图过渡 5
3.19. .effect() 对一个元素应用动画特效。 6
3.24. Fade Fade 效果设置组件的 alpha 属性的动画。 7
3.27. 突出特效（Highlight Effect） 7
3.31. Move Move 效果按 x 和 y 方向移动目标对象。
8
3.32. Move3D Move3D 类在 x、y 和 z 维度上移动目标对象。
8
3.33. RemoveAction RemoveAction 类可定义与视图状态定义的 RemoveChild 属性相应的动作效果。
8
3.34. Resize Resize 效果在指定的时间间隔更改组件的宽度或高度。或同一时候更改这两者。
8
3.35. Rotate Rotate 效果在 x, y 平面中环绕转换中心旋转目标对象。
8
3.36. Rotate3D Rotate3D 类在三维方向上环绕 x、y 或 z 轴旋转目标对象。
8
3.50. Scale:这是FLex 4里新提出的效果（Flex 3里有个类似的Zoom效果）
10
3.51. Scale Scale 效果环绕转换中心在 x 和 y 方向上缩放目标对象。
10
3.52. Scale3D Scale3D 类在三维方向上环绕转换中心缩放目标对象。 10
3.53. SetAction SetAction 类可定义用于设置已命名属性或样式的值的动作效果。
10
3.55. .toggle() 使用自己定义效果来显示或隐藏匹配的元素。
特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）
10
3.56. .toggleClass() 当动画样式改变时。依据 Class 是否存在以及 switch 參数的值，为匹配的元素集合内的每一个元素加入或移除一个或多个 Class。
特效核心（Effects Core） | 方法重载（Method Overrides）
10
3.57. WipeDirection WipeDirection 类定义 Wipe 类的 direction 属性的值。
11
3.58. (WipeLeft, WipeRight, WipeUp, WipeDown) ：擦拭 11
3.59. 转移特效（Transfer Effect） 把一个元素的轮廓转移到还有一个元素。 11
3.61. Wipe Wipe 效果通过在第一个和第二个位图之间执行定向划出来执行位图过渡效 11
5.2. creationCompleteEffect ：创建完毕 12
5.4. focusOutEffect ：失去键盘输入 12
5.5. hideEffect ：visable属性设置为false 12
5.11. rollOutEffect ：鼠标移到控件外 12
5.12. rollOverEffect ：鼠标移到控件上 12
5.13. showEffect ：visable属性设置为true 12
1. 动画框架的来源:flex,jqueryui,jsanim
jQueryUI KendoUI Bootstrap Foundation
http://raphaeljs.com/easing.html
作者 老哇的爪子 Attilax 艾龙。 EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax
2. 特效的分类
类型 功能描写叙述
2.1. Property effects 动态改变一个或多个目标对象的属性 (Animate、Fade, Resize, and AnimateColor)
2.2. Transform effects 缩入、旋转和位置的改变 .（Move, Rotate, and Scale）
2.3. Pixel-shader effects 主要是针对图片象素着色的动态效果 (CrossFade and Wipe)
2.4. Filter effects 过滤器效果（BevelFilter、BlurFilter 、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilter、DropShadowFilter、GlowFilter、GradientBevelFilter、GradientFilter、GradientGlowFilter、ShaderFilter）
2.5. 3D effects 3D 特效（Move3D、Rotate3D、Scale3D）
3. 特效总结
3.1. AnimateProperty:动画属性
3.2. .addClass()
当动画样式改变时。为匹配的元素集合内的每一个元素加入指定的 Class。
特效核心（Effects Core） | 方法重载（Method Overrides）
3.3. Animate
此 Animate 效果可设置各个值之间的随意属性集的动画。
3.4. AnimateColor AnimateColor 效果
设置 color 属性随时间发生的变化的动画，逐个通道地在给定的 from/to 颜色值之间进行插补。
3.5. AnimateFilter Animate Filter
效果可将 mx.filters.IBitmapFilter 实例应用至目标，并使您可以设置各个值之间的滤镜的属性的动画。
3.6. AnimateTransform
AnimateTransform 效果控制目标对象上全部与转换相关的动画。
3.7. AnimateTransform3D
AnimateTransform3D 效果将 AnimateTransform 效果的功能扩展到 3D 转换属性。
3.8. AnimateTransitionShader两个位图过渡
AnimateTransitionShader 效果可设置两个位图之间的过渡的动画。一个位图表示起始状态 (bitmapFrom)。还有一个表示结束状态 (bitmapTo)。
3.9. Blur ：模糊
3.10. 百叶窗特效（Blind Effect）
百叶窗特效（Blind Effect）通过将元素包裹在一个容器内，採用"拉百叶窗"效果来隐藏或显示元素。
3.11. 反弹特效（Bounce Effect）
反弹特效（Bounce Effect）反弹一个元素。
当与隐藏或显示一起使用时，最后一次或第一次反弹会呈现淡入/淡出效果。
3.12. CallAction
CallAction 效果对 target 对象调用由 functionName 属性指定的函数。并使用由 args 属性指定的可选參数。
3.13. CrossFade
CrossFade 效果通过在第一个和第二个位图之间执行淡入淡出来执行位图过渡效果。
3.14. 剪辑特效（Clip Effect）
剪辑特效（Clip Effect）通过垂直或水平方向夹剪元素来隐藏或显示一个元素。
3.15. 颜色动画（Color Animation）
使用 .animate() 实现颜色动画效果。
3.16. 降落特效（Drop Effect）
降落特效（Drop Effect）通过单个方向滑动的淡入淡出来隐藏或显示一个元素。
3.17. Desolve ：溶解
3.18. Easings
Easing 函数指定动画在不同点上的行进速度。
Raphaeljs 是个有一瓦easing特效..
3.19. .effect() 对一个元素应用动画特效。
特效核心（Effects Core） | 方法（Method）
3.20. 爆炸特效（Explode Effect）
爆炸特效（Explode Effect）通过把元素裂成碎片来隐藏或显示一个元素。
3.21. 淡入淡出特效（Fade Effect）
淡入淡出特效（Fade Effect）通过淡入淡出元素来隐藏或显示一个元素。
3.22. 折叠特效（Fold Effect）
折叠特效（Fold Effect）通过折叠元素来隐藏或显示一个元素。
3.23. Fade ：凋零
3.24. Fade Fade 效果设置组件的 alpha 属性的动画。
3.25. 果。
3.26. .hide()
使用自己定义效果来隐藏匹配的元素。 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）
3.27. 突出特效（Highlight Effect）
突出特效（Highlight Effect）通过首先改变背景颜色来隐藏或显示一个元素。
3.28. Glow ：发光
3.29. Iris ：瞳孔放大缩小
3.30. Move ：移动
3.31. Move Move 效果按 x 和 y 方向移动目标对象。
3.32. Move3D Move3D 类在 x、y 和 z 维度上移动目标对象。
3.33. RemoveAction RemoveAction 类可定义与视图状态定义的 RemoveChild 属性相应的动作效果。
3.34. Resize Resize 效果在指定的时间间隔更改组件的宽度或高度。或同一时候更改这两者。
3.35. Rotate Rotate 效果在 x, y 平面中环绕转换中心旋转目标对象。
3.36. Rotate3D Rotate3D 类在三维方向上环绕 x、y 或 z 轴旋转目标对象。
3.37. Resize ：改变大小
3.38. Rotate ：旋转
3.39. paging翻页的效果
3.40. Pause ：定格
3.41. 膨胀特效（Puff Effect）
通过在缩放元素的同一时候隐藏元素来创建膨胀特效（Puff Effect）。
3.42. 跳动特效（Pulsate Effect）
跳动特效（Pulsate Effect）通过跳动来隐藏或显示一个元素。
3.43. .removeClass()
当动画样式改变时。为匹配的元素集合内的每一个元素移除指定的 Class。
特效核心（Effects Core） | 方法重载（Method Overrides）
3.44. 缩放特效（Scale Effect）
依照某个百分比缩放元素。
3.45. 震动特效（Shake Effect）
垂直或水平方向多次震动元素。
3.46. .show()
使用自己定义效果来显示匹配的元素。 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）
3.47. 尺寸特效（Size Effect）
调整元素尺寸到指定宽度和高度。
3.48. 滑动特效（Slide Effect）
把元素滑动出视区。
3.49. .switchClass()
当动画样式改变时，为匹配的元素集合内的每一个元素加入和移除指定的 Class。
特效核心（Effects Core）
3.50. Scale:这是FLex 4里新提出的效果（Flex 3里有个类似的Zoom效果）
3.51. Scale Scale 效果环绕转换中心在 x 和 y 方向上缩放目标对象。
3.52. Scale3D Scale3D 类在三维方向上环绕转换中心缩放目标对象。
3.53. SetAction SetAction 类可定义用于设置已命名属性或样式的值的动作效果。
3.54. SoundEffect ：音效
3.55. .toggle() 使用自己定义效果来显示或隐藏匹配的元素。 特效核心（Effects Core） | 方法重载（Method Overrides） | 方法（Method）
3.56. .toggleClass() 当动画样式改变时。依据 Class 是否存在以及 switch 參数的值。为匹配的元素集合内的每一个元素加入或移除一个或多个 Class。
特效核心（Effects Core） | 方法重载（Method Overrides）
3.57. WipeDirection WipeDirection 类定义 Wipe 类的 direction 属性的值。
3.58. (WipeLeft, WipeRight, WipeUp, WipeDown) ：擦拭
3.59. 转移特效（Transfer Effect） 把一个元素的轮廓转移到还有一个元素。
3.60.
3.61. Wipe Wipe 效果通过在第一个和第二个位图之间执行定向划出来执行位图过渡效
3.62. Zoom ：放大缩小
4. 特效动画的播放方式
4.1. Sequence:顺序播放组合
4.2. Parallel：同一时候播放组合
5. 常见触发动画效果方式：
5.1. AddedEffect ：增加容器
5.2. creationCompleteEffect ：创建完毕
5.3. focusInEffect ：获得键盘输入
5.4. focusOutEffect ：失去键盘输入
5.5. hideEffect ：visable属性设置为false
5.6. mouseDownEffect ：鼠标按下
5.7. mouseUpEffect ：鼠标按起
5.8. moveEffect ：被拖动
5.9. resizeEffect ：又一次设定大小
5.10. removedEffect ：被移除
5.11. rollOutEffect ：鼠标移到控件外
5.12. rollOverEffect ：鼠标移到控件上
5.13. showEffect ：visable属性设置为true
6. Flex4 跟flex3 的特效类.
spark.effects 包中包括 Spark 效果类。
7. 參考
Flex 常见特效 - 周海锋 的专栏 - 博客频道 - CSDN.NET.htm
Flex4.0与其Flex3.0相比新增了哪些功能 - aspnetandjava的专栏 - 博客频道 - CSDN.NET.htm
flex api 中文在线
http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/
http://help.adobe.com/zh_CN/FlashPlatform/reference/actionscript/3/spark/effects/package-detail.html
jQuery UI API 类别 – 特效 _ w3cschool菜鸟教程.htm
10 个顶级 JavaScript 动画框架推荐 - Web前端 - ITeye资讯.htm
10 个顶级 JavaScript 动画框架推荐 - Web前端 - ITeye资讯.htm
版权声明：本文博主原创文章，博客，未经同意不得转载。
paip.关于动画效果的原则 html js 框架总结的更多相关文章
- ExtJS简单的动画效果2（ext js淡入淡出特效）
Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...
- 购物车增加、减少商品时动画效果：jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- iOS火焰动画效果、图文混排框架、StackView效果、偏好设置、底部手势等源码
iOS精选源码 高性能图文混排框架,构架顺滑的iOS应用. 使用OpenGLE覆盖阿尔法通道视频动画播放器视图. 可选最大日期截至当日日期的日期轮选器ChooseDatePicker 简单轻量的图片浏 ...
- CSS3使用Animation为同一个元素添加多个动画效果
本篇文章由:http://xinpure.com/css3-animation-for-the-same-element-multiple-animation-effects/ CSS3 Animat ...
- HTML5 动画效果的多种实现方式
HTML5 动画效果的多种实现方式 1. CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...
- CSS3中Animation为同一个元素添加多个动画效果
CSS3 Animation 并未提供 给一个元素同时添加多个动画效果的方法,就是说一个元素,只能给它定义一个动画效果,不能同时定义. 需求说明比如说,我想实现一个这样的动画效果: 一颗星星从上往下滑 ...
- AndroidScreenSlide项目切换view动画效果《IT蓝豹》
AndroidScreenSlide项目切换view动画效果 AndroidScreenSlide项目中有几个不错的效果,一:Card Flip翻页立体效果,二:Screen Slide 左右切换vi ...
- AnimCheckBox按钮点击动画效果《IT蓝豹》
AnimCheckBox按钮点击动画效果 AnimCheckBox按钮点击动画效果,点击选中后勾选框选择效果,很不错的动画功能.项目来源:https://github.com/lguipeng/Ani ...
- paip.关于动画特效原理 html js 框架总结
paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...
随机推荐
- 新手推荐：IIS+PHP+MYSQL环境配置教程
本文介绍刚开始接触php的朋友如何为自己的服务器配置php环境 首先我们要的工具: 1.IIS:这个当然是不能少的了,用系统自带的就好了,这里就不教大家怎么装了. 2.PHP:php-5.2.0-wi ...
- C 编程最佳实践（书写风格）
简介本文是为了满足开发人员的需要而写的.我们总结了一套指南,无论作为开发人员还是顾问,这些指南多年来一直都很好地指导着我们,我们把它们作为建议提供给您,希望对您的工作有所帮助.您也许不赞同其中的某些指 ...
- UVA 10003 Cutting Sticks
题意:在给出的n个结点处切断木棍,并且在切断木棍时木棍有多长就花费多长的代价,将所有结点切断,并且使代价最小. 思路:设DP[i][j]为,从i,j点切开的木材,完成切割需要的cost,显然对于所有D ...
- Python 分析Twitter用户喜爱的推文
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-5 @author: guaguastd @name: an ...
- git使用ssh密钥和https两种认证方式汇总（转）
在版本库的SSH方式和HTTPS方式是不同的,具体来说就是url信息的不同,但是,实际的认证机制也是不同的.当建立了本机密钥之后,使用ssh方式实际上是不需要再次认证的,而https则每次需要输入密码 ...
- 图像特征提取方法：Bag-of-words
Bag-of-words简单介绍 最初的Bag-of-words ,也叫做"词袋",在信息检索中,Bag-of-words model假定对于一个文本,忽略其词序和语法,句法,将其 ...
- Java面向对象基础二
1.对象的用法 2.多对象的创建方法 3.匿名对象的创建和用法
- ArcGIS 10.2 操作SQLite
SQLite,是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经在很多嵌入式产品中使用了它.ArcGIS 10.2 提供了对SQLite数据库的支持,这对那 ...
- nyoj 130 同样的雪花 【哈希】
同样的雪花 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 You may have heard that no two snowflakes are alike. ...
- android圆角View实现及不同版本号这间的兼容
在做我们自己的APP的时候.为了让APP看起来更加的好看,我们就须要将我们的自己的View做成圆角的,毕竟主流也是将非常多东西做成圆角.和苹果的外观看起来差点儿相同,看起来也还不错. 要将一个View ...