paip.关于动画特效原理 html js 框架总结

paip.关于动画特效原理 html js 框架总结

1. 动画框架的来源:flex,jqueryui 3

2. 特效的分类 3

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.4. Filter effects 过滤器效果（BevelFilter、BlurFilter 、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilter、DropShadowFilter、GlowFilter、GradientBevelFilter、GradientFilter、GradientGlowFilter、ShaderFilter）
4

2.5. 3D effects 3D 特效（Move3D、Rotate3D、Scale3D）
4

3. 特效总结 4

3.1. AnimateProperty:动画属性 4

3.2. .addClass() 4

3.3. Animate 4

3.4. AnimateColor AnimateColor 效果 5

3.5. AnimateFilter Animate Filter 5

3.6. AnimateTransform 5

3.7. AnimateTransform3D 5

3.8. AnimateTransitionShader两个位图过渡 5

3.9. Blur ：模糊 5

3.10. 百叶窗特效（Blind Effect） 5

3.11. 反弹特效（Bounce Effect） 5

3.12. CallAction 5

3.13. CrossFade 6

3.14. 剪辑特效（Clip Effect） 6

3.15. 颜色动画（Color Animation） 6

3.16. 降落特效（Drop Effect） 6

3.17. Desolve ：溶解 6

3.18. Easings 6

3.19. .effect()  对一个元素应用动画特效。 6

3.20. 爆炸特效（Explode Effect） 6

3.21. 淡入淡出特效（Fade Effect） 6

3.22. 折叠特效（Fold Effect） 7

3.23. Fade ：凋零 7

3.24. Fade Fade 效果设置组件的 alpha 属性的动画。 7

3.25. 果。 7

3.26. .hide() 7

3.27. 突出特效（Highlight Effect） 7

3.28. Glow ：发光 8

3.29. Iris ：瞳孔放大缩小 8

3.30. Move ：移动 8

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.37. Resize ：改变大小 8

3.38. Rotate ：旋转 8

3.39. paging翻页的效果 8

3.40. Pause ：定格 8

3.41. 膨胀特效（Puff Effect） 8

3.42. 跳动特效（Pulsate Effect） 9

3.43. .removeClass() 9

3.44. 缩放特效（Scale Effect） 9

3.45. 震动特效（Shake Effect） 9

3.46. .show() 9

3.47. 尺寸特效（Size Effect） 9

3.48. 滑动特效（Slide Effect） 9

3.49. .switchClass() 9

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.54. SoundEffect ：音效 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

3.62. Zoom ：放大缩小 11

4. 特效动画的播放方式 12

4.1. Sequence:顺序播放组合 12

4.2. Parallel：同时播放组合 12

5. 常见触发动画效果方式： 12

5.1. AddedEffect ：加入容器 12

5.2. creationCompleteEffect ：创建完成 12

5.3. focusInEffect ：获得键盘输入 12

5.4. focusOutEffect ：失去键盘输入 12

5.5. hideEffect ：visable属性设置为false 12

5.6. mouseDownEffect ：鼠标按下 12

5.7. mouseUpEffect ：鼠标按起 12

5.8. moveEffect ：被拖动 12

5.9. resizeEffect ：重新设定大小 12

5.10. removedEffect ：被移除 12

5.11. rollOutEffect ：鼠标移到控件外 12

5.12. rollOverEffect ：鼠标移到控件上 12

5.13. showEffect ：visable属性设置为true 12

6. Flex4 跟flex3 的特效类. 12

7. 参考 13

1. 动画框架的来源:flex,jqueryui,jsanim

http://jsanim.com/

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