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 动态改变一个或多个目标对象 ...
随机推荐
- 使用XML的五种场合，XML基本规则，XML的术语，结构与语法
在很多研讨会和培训班上我遇到过许多人,他们还不明白为什么要使用XML也不知道如何 在他们的应用中使用XML.一些来自诸如Gartner公司的报告建议说,商业公司不能再做 局外人了,不能对XML置之不理 ...
- spring开发基础
Spring是一个开源框架,它由Rod Johnson创建.它是为了解决企业应用开发的复杂性而创建的.Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情.然而,Spring的用途 ...
- SilkTest Q&A 4
Q31.如何在inc文件里面写函数? A31.在你在inc文件(例如demo.inc)里写好函数以后,你需要使用Use path/Use file来指定指定它们. 在SilkTest中->Opt ...
- Nginx之http_image_filter_module模块使用
一.安装 #yum install gd-devel # #./configure --prefix=/usr/local/nginx \ # --with-debug \ # --with-http ...
- ANTS Performance Profiler 破解使用
http://blog.csdn.net/wangjia184/article/details/7746089
- 探索Oracle之数据库升级七 11gR2 to 12c 升级完毕后插入PDB
探索Oracle之数据库升级七 11gR2 to 12c 升级完毕后插入PDB 前言: 从Oracle 12c開始,引入了容器数据库的概念,能够实现数据库插拔操作,例如以下图: 如今我们 ...
- TRIZ系列-创新原理-29-气动或液压结构原理
气动或液压结构原理的详细表述例如以下:1)用气态或液态部件替代固体部件.能够用空气或者水,也能够用气垫或水垫,使这些部件膨胀.这条原理符合系统的动态性进化法则-柔性化.在改造系统时,我们能够尝试将系统 ...
- C++ 多态性分析
编译 - 时间多态性--函数重载 编译后的中间代码(例如GCC产生.o文件.此时还不是汇编语言)函数名字有变化,看以下两个样例. void cc_show(const char*str) -& ...
- appium简明教程
appium简明教程 什么是appium? 下面这段介绍来自于appium的官网. Appium is an open-source tool you can use to automate mobi ...
- uva10480（最小割）
传送门:Sabotage 题意:给定多个城市的网络,每个城市之间的通信有花费,要求使得首都和最大城市之间的通信断掉的最小花费.要求输出任意一组砸掉的边. 分析:跑一遍最大流dinic后,根据最小割定理 ...