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
paip.关于动画特效原理 html js 框架总结相关推荐
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
- JS实现动画特效2（缓动函数封装、导航栏筋斗云效果）
JS实现的动画特效:手风琴特效展示图片.筋斗云动画 一.小知识 1.浏览器的offsetLeft是就近取整,要实现向上取整或向下取整,可以调用Math.ceil()或Math.floor() 2.想要 ...
- html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
- HTML+CSS+JS实现 ❤️夜晚云层动画特效❤️
效果演示: 基于css3 keyframes 属性制作乌云密布云层动画,夜晚云层飘过动画特效.可用于网页动态云层背景特效.利用animation 和png云图片制作完成. 代码目录: 主要代码实现: ...
- vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...
- yzmcms图片自适应代码_基于segment.js制作的非常有创意的分段式SVG文字动画特效...
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: 要使用该SVG文字动画特效,要在页面中引入segment.js,它用于动画SVG路径,d3-ease,用于制作ea ...
- html 文字悬停翻转,html5+TweenMax.js鼠标悬停文字翻转动画特效
8种动画效果十分流畅的html5+TweenMax.js鼠标悬停文字翻转动画特效,支持英文字母和中文汉字. 查看演示 下载资源: 14 次 下载资源 下载积分: 20 积分 js代码 const le ...
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- html5 特效框架,超级惊艳 10款HTML5动画特效推荐
原标题:超级惊艳 10款HTML5动画特效推荐 今天我们要来推荐10款超级惊艳的HTML5动画特效,有一些是基于CSS3和jQuery的,比较实用,特别是前几个HTML5动画,简直酷毙了,现在将它们分 ...
- js css3挂历撕掉动画特效
js基于css3属性制作挂历日历本,默认获取当前日期和星期,通过鼠标点击日历本挂历掉落动画特效. 这是古董挂历哈哈哈好久没见过了,喜欢的一定要试哦~ html代码 <div class=&quo ...
最新文章
- linux备份目录命令tar,Tar命令备份还原Linux系统
- vscode+XDebug调试远程环境(虚拟机)上的PHP代码
- mysql aggregate_SQL语句之Aggregate函数
- leetcode206 反转链表
- 超级详细的手写webpack4配置来启动vue2项目（附配置作用）
- linux bitcoind环境搭建,bitcoin_book_2nd
- 微软8月补丁星期二值得关注的几个0day、几个严重漏洞及其它
- 训练集、测试集loss容易出现的问题总结
- python网络编程01/网络协议
- 搜狗输入法遗留文件sogouInput删除方法（此方法适合大部分流氓软件）
- Bluno 是干什么的？- 云物联戒烟设备的可选原型之一
- 多通道波形记录仪自动化计量校准软件NSAT-3070
- idea的下载与安装破解
- ADT下载地址（含各版本），最新ADT-23.0.7
- java 过滤微信昵称_java过滤微信昵称特殊字符
- notes服务器标识文件,怎样重新验证将要过期的服务器标识符文件_lotus notes
- 爬取《战狼2》电影短评论，生成图云
- HTML——表白树动画
- PostgreSQL SQL 语言：全文搜索
- 003-位运算异或“∧”使特定bit位翻转