对于css3的Transitions,网上很多介绍,相信大家都比较了解,这里用最简单的方式介绍下:

transition语法:
transition:<transition-property> <transition-duration> <transition-timing-function> <transition-delay>;

例如 transition:all 2.5s linear 0.2s;

表示全部属性变化,持续2.5秒,缓冲效果为linear,延迟0.2s执行;
对于缓冲效果,很多网站只介绍了默认提供的:ease, linear, ease-in, ease-out, ease-in-out
这对于复杂动画效果来说是远远不够的,其实还有一个更强大的属性叫:cubic-bezier(x1, y1, x2, y2)来设置动画的贝塞尔曲线。

cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内,否则无效。但是在一些浏览器(Chrome,Firefox,Opera,IE11 预览版)下对P1(x1, y1)和P2(x2, y2)的坐标中的y1和y2并没有这个限制,曲线可以是负值,也可以取大于1的值。如果x1和x2是负数,或者大于1的值那么直接应用最终样式没有过渡效果。而一些老版本的浏览器曲线值仍需在[0, 1]区域内,否则直接应用最终样式,比如Opera 12,和老版本的webkit浏览器,其他没测试。

而(x1, y1, x2, y2)的参数怎么获取呢,cubic-bezier.com 提供了详细的演示。
于是,了解过后,我们制作一个demo看看效果:

贝塞尔曲线(cubic bezier)的更多相关文章

  1. 计算机图形学:贝塞尔曲线(Bezier Curve)

    计算机图形学:贝塞尔曲线(Bezier Curve) 贝塞尔能由贝塞尔样条组合而成,也可产生更高维的贝塞尔曲面.

  2. iOS开发 贝塞尔曲线

    iOS开发 贝塞尔曲线UIBezierPath - 陌云 时间 2014-03-14 11:04:00  博客园-所有随笔区 原文  http://www.cnblogs.com/moyunmo/p/ ...

  3. iOS开发 贝塞尔曲线UIBezierPath

    最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...

  4. Android -- 贝塞尔曲线公式的推导

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...

  5. Android -- 贝塞尔曲线公式的推导和简单使用

    1,最近看了几个不错的自定义view,发现里面都会涉及到贝塞尔曲线知识,深刻的了解到贝塞尔曲线是进阶自定义view的一座大山,so,今天先和大家来了解了解. 2,贝塞尔曲线作用十分广泛,简单举几个的栗 ...

  6. CAShapeLayer和贝塞尔曲线配合使用

    前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...

  7. iOS开发之画图板(贝塞尔曲线)

    贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...

  8. svg path中的贝塞尔曲线

    首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控 ...

  9. NGUI研究院之在Unity中使用贝塞尔曲线(六)[转]

    鼎鼎大名的贝塞尔曲线相信大家都耳熟能详.这两天因为工作的原因需要将贝塞尔曲线加在工程中,那么MOMO迅速的研究了一下成果就分享给大家了哦.贝塞尔曲线的原理是由两个点构成的任意角度的曲线,这两个点一个是 ...

随机推荐

  1. RN8209校正软件开发心得(1)

    最近领导突然让我做软件了,头大啊.以前也没怎么自己独立做过软件,这次来的突然啊,面对这么大的任务量自己只能加把劲了,还等着领导给涨工资呢,哈哈... 作为编程的小白,要自己做一款上位机的软件实属不易啊 ...

  2. Unity3D性能优化

    一.美术资源优化   1.动态物体,角色.怪物.NPC (1)控制面的数量,300-2000个 (2)控制Skinner Mesh Renderer的数量,1个 (3)控制材质数量,1-3个 (4)控 ...

  3. AD域的安装(在Windows Server 2003中安装Active Directory)

    在Active Directory中提供了一组服务器作为身份验证服务器或登录服务器,这类服务器被称作域控制器(Domain Controller,简称DC).建立一个AD域的过程实际就是在一台运行Wi ...

  4. windows XP上实现python2.7.5和python3.4.3共存

    windows XP上实现python2.7.5和python3.4.3共存过程记录: 1. 首先安装python2.7.5和python3.4.3,两个版本安装顺序不分前后; 2. 检查系统环境变量 ...

  5. 配置子目录Web.config使其消除继承,用虚拟目录创建多个网站的方法

    来源:http://www.wtnzone.com/post/2011/02/20/Set-Web-Config-to-Turn-Inheritance-Off.aspx ASP.NET提供了强大的W ...

  6. BZOJ 2160: 拉拉队排练

    Description 问长度前 \(k\) 大的奇长度回文子串的乘积. Sol Manacher. 直接马拉车跑一边,统计一下答案,每次将长度-2就可以了. Code /************** ...

  7. 乐校园单车项目第一天——购买Apple开发者账号、创建SVN

    日常三问: 1. 我应该干什么? 2. 我能干什么? 3. 我想干什么?

  8. Sublime3和Chrome配置自动刷新网页【实测可用】

    SublimeText2下的LiveReload在SublimeText3下无法正常使用,本文整理SublimeText3安装LiveReload的方法.win7下实测可用! 安装成功后,就不需要再手 ...

  9. VS Build目录下各文件的作用

    VS2010中各种类型文件的作用: .sln 相当于VC6中 .dsw    .vcxproj 相当于VC6中 .dsp    .suo 相当于VC6中 .ncb    .vcxproj.filter ...

  10. 八款常见的Android游戏引擎

    原文地址:http://bbs.csdn.net/topics/380203732 1.Angle  Angle是一款专为Android平台设计的,敏捷且适合快速开发的2D游戏引擎,基于OpenGL  ...