animate动画封装(初级)

最新推荐文章于 2021-05-05 16:19:17 发布

fxy2016

最新推荐文章于 2021-05-05 16:19:17 发布

阅读量399

点赞数

分类专栏： javascript学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/fxy2016/article/details/52297347

版权

本文介绍了如何封装一个简单初级的JavaScript animate运动框架，包括获取起点和终点、计算步长、处理兼容性问题以及具体的代码实现。通过设置定时器，使元素根据预设的属性和时间平滑移动。

摘要由CSDN通过智能技术生成

封装一个简单初级的animate运动框架

一、思路分析

1.需要获取起点（当前位置）和终点（目标位置），得到变化量以及步长。

信号量JSON samaphoerJSON，即现在的状态，时刻变化的

终点信号量JSON targetJSON

步长信号量JSON stepJSON

2.代码编写步骤

（1）函数设置 function animate(elem,targetJSON,time,callback) {} 并声明信号量对象

（2）给信号量对象添加属性，与终点信号量属性一致（计算后样式轮子运用）
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fxy2016

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

和我一起学 Three.js【初级篇】：3. 掌握摄影机

libinfs的博客

04-20

239

在本篇文章中，我向您介绍了 Three.js 中绝大多数关于「摄影机（Camera）」的概念和用法，通过恰当的使用摄影机和控制器，我们可以轻松地创建可交互的 3D 场景。

简单animate方法的封装

weixin_33962621的博客

11-10

140

function animate(ele,json,fn){ clearInterval(ele.timer); ele.timer = setInterval(function () { var bool = true; console.log(1); for(var k in json){ if(k == "opaci...

参与评论您还未登录，请先登录后发表或查看评论

封装animate动画

前端小99的博客

09-06

238

animate动画函数的封装方法

qq_42863433的博客

02-19

708

废话就不多说马上就开始讲解 1，获取样式首先这里获取的不是行内样式，而是非行内样式，具体可以通过两个属性去获取（为了兼容），第一个属性是 currentStyle 这个属性是IE的私有属性，用法：[object].currentStyle[attr] 参数：[object]：想要获取样式的对象 [attr]：获取当前对象那个样式第二个属性是 getComputedStyle()，这...

animate动画封装(升级版)

fxy2016的博客

10-13

410

升级版animate运动框架一、思路分析 1.获取初始状态集合，目标状态集合，便于得到变化量集合 originalJSON 初始状态集合，这个JSON永远不变 targetJSON 目标状态集合，这个JSON永远不变 deltaJSON 差值集合，这个JSON永远不变 2.主要添加了缓冲二、代码 // 这个版本主要修改: // 1)修改了变量名frameNumber //

前端开发——Animation动画

小头Sophia

04-06

1597

Animation动画是不用触发，就可以动起来的 html> lang="en"> charset="UTF-8"> Animation动画的练习 type="text/css"> div{ width: 100px; height: 100px; background:red;

ios-一句话轻松实现常用动画.zip

07-11

这个资源尤其对初级到中级的iOS开发者来说非常实用，因为它简化了动画编程的过程。首先，让我们深入了解一下iOS中的视图动画。在iOS中，我们可以使用Core Animation框架或者UIKit提供的动画方法来创建各种视图动画...

在线抽奖js

09-16

jQuery的`.animate()`方法可以实现平滑的动画效果。例如，我们可以让抽奖转盘中的各个奖项按顺序转动，然后慢慢减速至停止，显示最终的中奖结果。 6. **动画控制**：使用`setTimeout()`或`setInterval()`控制...

jQuery仿美橙右侧悬浮在线qq客服代码.zip

最新发布

09-26

jQuery插件是扩展jQuery功能的代码库，它们通常是封装好的函数，可以增加新的选择器、方法或者行为。虽然这里没有具体提及哪个jQuery插件被使用，但通常这样的悬浮客服功能可能需要一个自定义的插件来实现，比如用于...

Animate动画库及演示

07-12

非常有用的web html5动画特效库Animate.css库，供大家下载使用。附有演示例子。

【css】animate.css使用指南

不忘初心，坚定道路！

05-05

1278

前言最近我需要将animate.css整合进dooring中做成动画，毕竟这玩意自己写太累，而且写的效果可能也不是很自然。安装官网：https://animate.style/ npm 或者yarn 安装即可。https://www.npmjs.com/package/animate.css 使用引入animate.css 使用link或者直接引入都可以。然后加类名即可。 import 'animate.css'; <div style={{

前端基础复习--17animation 动画？animate.css？

小白的学习路

07-24

193

1. animation 动画？动画复杂在哪里呢？在@keyframes里可以填很多个节点 animation-name : 设置动画的名字 (自定义的) animation-duration : 动画的持续时间 animation-delay : 动画的延迟时间 animation-iteration-count : 动画的重复次数，默认值就是1 ，⭐️infinite无限次数 animation-timing-function : 动画的运动形式 ...

AnimationUtil 动画工具类

xiaoerbuyu1233的博客

11-23

480

import android.view.animation.Animation; import android.view.animation.TranslateAnimation; public class AnimationUtil { private static final String TAG = AnimationUtil.class.getSimpleName(); /** * 从控件所在位置移动到控件的底部 * * @return ..

原生js封装好的动画函数+jQuery函数animate

jiaweimin123的博客

09-20

2035

jQuery方法： $(function () { $("#move a").mouseenter(function () { $(this).find('i').animate({top: '25px', opacity: '30'}, 300, function () { $(this).css({width: "30px"}); $(this).animate({top: '0', opacity: '10'}, 200)

js 匀速/缓动动画简单封装

09-10

6476

.box1 { width: 300px; height: 300px; padding: 100px; margin: 100px; position: relative; border: 100px solid #000;

【Android】Android图形之Animate

心有猛虎,细嗅蔷薇

12-30

3811

Frame Animate 语法： <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot=["true" | "false"] > <item android:drawable="@[package:]drawable/drawa

Vue中使用类封装CSS3实现的序列图动画

Bidding

03-22

1414

jQuery基础教程第四版：精通选择符、事件、动画与Ajax

3. 动画效果：jQuery的动画功能强大，包括滑动、淡入淡出、淡出淡入等，通过`.animate()`函数可以创建自定义动画，同时`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法提供了丰富的预设效果。 4. DOM操作：...