利用javascript实现在圆周上匀速划动的动画效果
先看下效果：
圆心下的那个那个白圈的位置是光圈的起始位置，光圈所在的位置为终点位置。光圈从起始位置开始，沿着圆的轮廓匀速到终点位置。
在支持css3的情况下，可以利用css3做旋转效果来达到这种效果。具体思路为：
1）将光圈相对于圆进行绝对定位，设置光圈的绝对位置为上面所说的终点位置；
2）对圆设置一个旋转角度，如：transform: rotate(130deg)，此时，光圈也会改变位置，光圈旋转后的位置为上面所说的起点位置。
3）然后对圆设置transition，如：transition: transform .6s ease-out;这样会在0.6s内将光圈从起点位置旋转到终点位置。
在不支持css3的情况下，如IE9及IE9以下的浏览器，我使用的是javascript实现。具体思路为：
1）对圆心进行相对定位，对光圈进行绝对定位，设置圆的起始位置（在圆心的正下方）
2）以圆心为中心点，光圈的起始位置可以看做是-90读的地方，现在要将光圈从-90度到45度。做法就是通过不断的改变角度，从-90到45（这里需要使用定时器），根据每次的角度和圆的半径，首先获取弧度，再根据js中的Math对象的sin()和cos()获取光圈的x,y坐标（相对与圆心）。
3）根据每次得到的x,y坐标计算光圈的left,top值。由于角度是慢慢改变的，因此呈现的效果就是光圈从-90度到45度匀速划动。
实现的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
#box{
width: 80px;
height: 80px;
background-color: limegreen;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
padding-top: 1px;
} #box .circle-dot{
position: relative;
margin-top: 39px;
margin-left: 40px;
width: 1px;
height: 1px;
} #box .circle-dot #light{
position: absolute;
width: 30px;
height: 30px;
background:url(images/light.png) no-repeat;
left: -15px;
top: 25px;
}
</style>
</head>
<body>
<div id="box">
<div class="circle-dot">
<dev id="light"></dev>
</div>
</div>
<script>
window.onload=function(){
var light = document.getElementById("light");
var circle = document.getElementById("box");
rotate(light,circle);
//js控制光圈划动
function rotate(ele,circle){
var r = circle.clientWidth/2;
var rotate = -91;
var timer = setInterval(step,10);
function step(){
rotate += 3;
var a = 2*Math.PI/360*rotate;
if(rotate == 44){
clearInterval(timer);
}
var x = r * Math.cos(a)-15; //光圈宽高为30，减去15是让光圈的中心在圆周上
var y = -r * Math.sin(a)-15;
ele.style.left=x+"px";
ele.style.top=y+"px";
}
}
}
</script>
</body>
</html>
利用javascript实现在圆周上匀速划动的动画效果的更多相关文章
- [ASP.NET] 如何利用Javascript分割檔案上傳至後端合併
最近研究了一下如何利用javascript進行檔案分割上傳並且透過後端.特地記錄一下相關的用法 先寫限制跟本篇的一些陷阱 1．就是瀏覽器的支援了 因為本篇有用到blob跟webworker 在ie中需 ...
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- GitHub Android 最火开源项目Top20 GitHub 上的开源项目不胜枚举，越来越多的开源项目正在迁移到GitHub平台上。基于不要重复造轮子的原则，了解当下比较流行的Android与iOS开源项目很是必要。利用这些项目，有时能够让你达到事半功倍的效果。
1. ActionBarSherlock(推荐) ActionBarSherlock应该算得上是GitHub上最火的Android开源项目了,它是一个独立的库,通过一个API和主题,开发者就可以很方便 ...
- 如何利用express新建项目（上）
如何利用express新建项目(上) 摘要 这篇文章将讲解了如何快速利用express新建项目 一.express4.x的安装 1. npm install -g express 2. npm ins ...
- ASP利用xhEditor编辑器实现图片上传的功能。
本人这几天在做一个软件,无意中用到xhEditor在线编辑器,这个编辑器虽然看着比较简单,但功能非常强大,大家可以去官网上查看,废话不说了. 这篇文件主要是实现在ASP环境中利用xhEditor编辑器 ...
- (Demo分享)利用JavaScript（JS）实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- JS控制语句 编程练习 学生数据，分别是姓名、性别、年龄和年级，接下来呢，我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
编程练习 在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名.性别.年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦. 学生信息如下 ...
随机推荐
- getpwuid和getpwnam的用法
如果知道一个用户的用户ID或者登录名,可以通过getpwuid或getpwnam函数获得用户的登录信息.函数原型为: #include <pwd.h> #include & ...
- please upgrade your plan to create a new private reposiory
请升级你的计划来创建一个新的私人仓库 提交仓库到github,要公开,除非买他们服务,所以把勾去掉就好了keep this code private
- 表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的
jQuery代码 <input value="请输入用户名" type="text"> <input value="请输入密码&qu ...
- vue 使用element-ui实现城市三级联动
<template> <div> <el-select v-model="prov" style="width:167px;margin-r ...
- MySql的基操勿六
2018/12/6 星期四 19:34:07 authot by dabaine 数据库注释; -- 这就是注释 /*.....*/ 这也是注释 创建库; create databse [if not ...
- Python Third Day-函数
''' 为什么要有函数?没有函数带来的困扰? 组织结构不清晰,可读性差 代码冗余 可扩展性差 什么是函数 具备某一个功能的工具--->函数 事先准备工具->函数的定义 拿来就用.重复使用- ...
- js对象,数组,字符串的操作
循环绑定=>变量污染 for (var i = 0;i<lis.length;i++){ lis[i].index = i;#给页面元素对象添加一个任意属性(保留索引的属性index) # ...
- iMX6QD How to Add 24-bit LVDS Support in Android
iMX6QD How to Add 24-bit LVDS Support in Android 版本 4 由 Ying Liu 于 2012-10-14 下午11:52创建,最后由 Jodi Pau ...
- shell中的$(( )) 的用途：主要用在整数的运算$(( a+b*c ))
$ a=5; b=7; c=2 $ echo $(( a+b*c ))//注意在进行这些运算时必须是双括号 $ echo $(( (a+b)/c )) $ echo $(( (a*b)%c))
- Java POI 操作Excel(读取/写入)
pom.xml依赖: <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi< ...