一、transition 和 animation

css上面两个属性允许你指定缓动函数。 不幸的是，他们不支持所有的缓动函数，所以你必须指定贝赛尔曲线实现缓动函数。

选取缓动函数以显示贝赛尔曲线。

div {

-webkit-transition: all 600ms 缓动函数的贝赛尔曲线;

transition: all 600ms 缓动函数的贝赛尔曲线;

}

在线编辑贝塞尔函数

二、easing

使用 jQuery 加上 jQuery Easing 插件是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 .animate 函数当做第三个参数或是 easing 的键值。

div.animate({ top: '-=100px' }, 600, '缓动函数名称', function () { … })

实现函数

easeInOutQuint: // 缓出函数

function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

return c/2*((t-=2)*t*t*t*t + 2) + b;

}

t: current time(当前时间),

b: begInnIng value(初始位置值),

c: change In value(单位时间内改变值),

d: duration(持续时间)

可以笔画一下大概运动的曲线如下；

三、应用-转盘滚动

1、 分配转盘不同区域(角度)对应不同的礼物，把信息存入数组lotteryArray

2、选择运动函数，比如：

easeInOutQuint = function(x, t, b, c, d) {

if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;

return -c / 2 * ((t -= 2) * t * t * t - 2) + b;

};

3、  编写旋转函数

var flag = true;

var rotateFunc = function(selector,toDeg, dur, fn) {

$(selector).css("transform",("rotateZ(0deg)"));

var isOver = false;

var startDeg = 0,

startTime = +new Date();

toDeg += Math.ceil(2*Math.random()+2)*360;

var timer = setInterval(function() {

var t = (+new Date) - startTime;

if (t >= dur) {

clearInterval(timer);

t = dur;

isOver = true;

}

var deg = easeInSine(null,t,startDeg,toDeg,dur)

$(selector).css("transform",("rotateZ("+ deg +"deg)"));

if (isOver && fn) {

fn();

}

}, 20);

}

4、点击开始抽奖，请求后台接口，返回本次启动转盘的多下发的礼物

5、根据下发的礼物信息去找数组lotteryArray对应的角度，以此作为本次转盘转动的最终角度

6、请求成功之后，调用转动函数，传入上一步获得的最终角度即可

网站建设中前端常用的jQuery&plus;easing缓动的动画

网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

支持xcode6的缓动函数Easing以及使用示例

支持xcode6的缓动函数Easing以及使用示例 用xcode6新建工程后,直接导致不支持之前的Easing缓动函数的代码,经过修改后就可以正常使用了,虽然比不上POP高大上的动画,但用缓动函数的动 ...

quick-cocos2dx 之transition&period;execute&lpar;&rpar;的缓动效果

注:本文图片来源(http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html. 侵权请告知,即刻删除) 什么是缓动, 缓动(ea ...

过渡与动画 - 缓动效果&amp&semi;基于贝塞尔曲线的调速函数

难题 给过渡和动画加上缓动效果是一种常见的手法(比如具有回弹效果的过渡过程)是一种流行的表现手法,可以让界面显得更加生动和真实:在现实世界中,物体A点到B点往往也是不完全匀速的 以纯技术的角度来看,回 ...

GSAP JS基础教程--使用缓动函数

今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:

JS动画之缓动函数分析及动画库

上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

NGUI缓动函数

缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721

iOS基本动画&sol;关键帧动画&sol;利用缓动函数实现物理动画效果

先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...

Silverlight动画学习笔记&lpar;三&rpar;：缓动函数

(一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...

随机推荐

BZOJ3564 信号增幅仪

http://www.lydsy.com/JudgeOnline/problem.php?id=3564 思路:先旋转坐标系,再缩进x坐标,把椭圆变成圆,然后做最小圆覆盖. 还有,为什么用srand( ...

MySQL里求给定的时间是所在月份的第几个礼拜

Share 一个昨天写的函数. 目的是求给定的时间是所在月份的第几个礼拜. DELIMITER $$ USE `t_girl`$$ DROP FUNCTION IF EXISTS `weekofmon ...

Android知识点网址

1.proguard字段详解 http://blog.csdn.net/jddkdd2/article/details/8858909 2.android提示框(时间,普通单选.多选对话框),常用控件 ...

从壹开始前后端分离【 &period;NET Core2&period;0 &plus;Vue2&period;0 】框架之九 &vert;&vert; 依赖注入IoC学习 &plus; AOP界面编程初探

更新 1.如果看不懂本文,或者比较困难,先别着急问问题,我单写了一个关于依赖注入的小Demo,可以下载看看,多思考思考注入的原理: https://github.com/anjoy8/BlogArti ...

Flutter进阶—点击、拖动和其他手势

Flutter中的手势系统有两个层次.第一层具有原始指针事件,其描述了穿过屏幕的指针(例如触摸.鼠标和触控笔)的位置和移动.第二层具有手势,其描述由一个或多个指针移动组成的语义动作. 指针指针代表用户 ...

Zookeeper集群部署与配置(三)

在上一篇博客中我们讲解了,此篇博客将继续介绍Zookeeper的集群部署与配置. 环境 集群配置的环境与单机配置的环境相同,唯一不同的就是集群是在多台服务器 ...

FreeMarker详解

什么是 FreeMarker? FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具. 它不是面向最终用 ...

【Linux】linux常用查看命令

查看磁盘大小的命令df .du df -h 查看整台服务器的硬盘使用情况 du -sh * 查看每个文件夹的大小 ps -ef 查看所有进程 top 实时显示进程状态用户 free -m 查看内存使用 ...

IOS是否存在32位和64位版本的区分

苹果于2013年9月推出了iPhone 5S新手机,采用的全新A7处理器其最大特色就是支持64位运算.其64位A7处理器的使用意味着iPhone性能会大有提高,性能和速度更加出色:而要到达到这样的性能 ...

&lbrack;LeetCode&rsqb; 237&period; Delete Node in a Linked List&lowbar;Easy tag&colon; Linked List

Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...