缓动动画offset

最新推荐文章于 2021-12-08 10:46:56 发布
最新推荐文章于 2021-12-08 10:46:56 发布
阅读量162 收藏
点赞数
分类专栏： 轮播原生
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103911642
版权

1.三个函数
Math.ceil() 向上取整
Math.floor() 向下取整
Math.round() 四舍五入

2.缓动动画原理
盒子位置=盒子本身位置+（目标位置-盒子本身位置）/10
offsetLeft取值本身会四舍五入

3.缓动动画封装
封装模块

  function animate(ele,target){
				clearInterval(ele.timer);
				ele.timer=setInterval(function(){
					var step=(target-ele.offsetLeft)/10;
					step=step>0?Math.ceil(step):Math.floor(step);
					ele.style.left=ele.offsetLeft+step+"px";
					if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
						ele.style.left=target+"px";
						clearInterval(ele.timer);
					}
				},30)
			}

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: pink;
				position: absolute;
				left: 0;
			}
		</style>
	</head>
	<body>
		<button>运动到200</button>
		<button>运动到400</button>
		<div></div>
		<script>
			var btn=document.getElementsByTagName("button");
			var div=document.getElementsByTagName("div")[0];
			
			btn[0].onclick=function(){
				animate(div,200);
			}
			btn[1].onclick=function(){
				animate(div,400);
			}
			
			//缓动动画封装
			function animate(ele,target){
				clearInterval(ele.timer);
				ele.timer=setInterval(function(){
					var step=(target-ele.offsetLeft)/10;
					step=step>0?Math.ceil(step):Math.floor(step);
					ele.style.left=ele.offsetLeft+step+"px";
					if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
						ele.style.left=target+"px";
						clearInterval(ele.timer);
					}
				},30)
			}
		</script>
	</body>
</html>
zuo_zuo_blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter抛物线动画实例.zip 购物车加入动画
01-25
而`Curve`类则提供了多种曲线函数，如缓入缓出（EaseInOut）和抛物线（Curves.bounceIn或Curves.elasticInOut），这些曲线可以为动画赋予不同的运动感。 以下是一个简单的抛物线动画实现步骤： 1. **定义Tween对象...
Flutter 平移动画 — 4种实现方式
xhuww的博客
06-20 1万+
Flutter提供了四个Widget可实现平移动画，分别是SlideTransition、AlignTransition、PositionedTransition、RelativePositionedTransition
flutter 动画展开菜单_Flutter 强大的动画功能，从理论到实践教程，让你轻松get所有技能包...
weixin_39867212的博客
11-30 408
本文作者：Didier Boelens原文链接：www.didierboelens.com/2018/06/ani…翻译: hccFlutter中的动画功能强大且易于使用。接下来通过一个具体的实例，您将学到关于 Flutter 动画的一切。第一次看文章的朋友可以关注我的专栏，每日分享发布Flutter进阶学习技术干货！Flutter跨平台开发终极之选​zhuanlan.zhihu.com难度：中级...
30分钟学会Flutter动画开发
shving的专栏
06-07 1036
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数..
Flutter 路由动画Offset(dx,dy)
华山论码
12-08 1324
页面显示在屏幕时，Offset的dx dy均为0； 如果需要动画页面从屏幕底部弹出，则应该是dy=1 到 dy=0； 如果需要动画页面从右侧推入到屏幕，则应该是dx=1 到 dx=0； 如果需要动画页面从屏幕顶部弹出，则应该是dy=0 到 dy=-1 Animation<Offset> animationSlideUp = new Tween( begin: Offset(0.0, 5.0), end: Offset(0.0, 0.0), ).anima.
CSS3 动画
Continue的博客
03-17 238
CSS3 动画 动画（animation）是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 动画的基本使用 制作动画分为两步： 先定义动画 再使用（调用）动画 1.用 keyframes 定义动画（类似定义类选择器） 语法： @keyframes 动画名称{ 0%{ //定义初始状态，如 width:100px; }
CSS3鼠标悬停按钮动画事件
06-24
/* 添加过渡效果，时间0.3秒，缓动函数ease-in-out */ } button:hover { box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 鼠标悬停时的阴影效果，比初始状态更明显 */ } ``` 四、更多创意动画效果 除了基本的阴影...
jQuery动画效果animate和scrollTop结合使用实例
12-03
此外，`animate`还可以接受其他参数，如 easing 函数，来改变动画的缓动效果，或者添加完成回调函数以执行动画结束后的操作。 总之，`jQuery.animate`和`scrollTop`的组合使用是实现页面滚动动画的一种强大工具，它...
jQuery动画库页面滚动元素动画.zip
11-20
在实际应用中，我们可能还需要考虑动画的执行次数、动画队列、动画的缓动函数（easing），以及如何避免重复触发等问题。例如，可以使用`.one()`方法只执行一次动画，或者使用`.stop()`来停止正在运行的动画。 此外...
just-curves:可重用的缓动函数库
05-02
常见的缓动曲线，例如JS和CSS的easyIn，easyOut，easyInQuint 使用cubicBezier（），steps（）和cssFunction（）进行自定义轻松 使用现有代码中CSS缓动功能 下载量小：小于5k ，无依赖性 与 ， ， ， ， ， 以及...
Android中Animation 详细解读
热门推荐
yhqbsand
12-31 1万+
Animation从总体来说可以分为两类： 1.Tweened Animations：该类提供了旋转，移动，伸展，淡入淡出等效果 Tweened Animations也有四种类型： 1.     Alpha：淡入淡出效果 2.     Scale：缩放效果 3.     Rotate：旋转效果 4.     Translate：移动效果 设置动画有两种方式：在xml文件中或者在jav
[翻译] Flutter 中的动画 - 简易指南 - 教程
weixin_34256074的博客
03-14 283
非常感谢 Didier Boelens 同意我将它的一些文章翻译为中文发表，这是其中一篇。 本文通过一个实例详细讲解了 Flutter 中动画的原理。 原文的代码块有行号，对修改的代码有黄色背景。在这里不能对代码添加行号和背景颜色，所以，为方便阅读有些代码块用了截图。 原文 链接 Flutter中的动画功能强大而且使用起来非常简单。 通过一个具体的例子，您将学习如何构建自己的动画所需的一...
css 偏移 offset（可实现元素沿不规则路径运动的动画）
朝阳39的博客
11-16 4606
offset是以下属性的缩写，用于实现元素的偏移 offset-anchor offset-distance offset-path offset-position （兼容性不好，暂不推荐使用，下文略） offset-rotate 因offset语法复杂，不推荐完全使用缩写，推荐将常用的几个子属性加入缩写，其余CSS属性分开书写，如： offset: path("M20 0 L5.858 30L34.142 30Z") auto 90deg; offset-position: 50% 5
手把手原生js简单轮播图
weixin_30240349的博客
07-18 129
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; ...
JavaScript动画：offset和匀速动画详解(含轮播图的实现)
weixin_34365635的博客
02-02 231
本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。 以下是正文。 offset简介 我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。 offset的中文是：偏移，补偿，位移。 js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括： ...
JavaScript Offset, Client, Scroll系列以及动画函数
weixin_45375510的博客
09-11 221
一、元素偏移量offset系列 offset相关属性可以动态得到该元素的位置(偏移)、大小等。 获得元素距离带有定位的父元素的位置 获得元素自身大小(宽度和高度) 返回的数值都不带单位 offset系列常用属性： offset系列属性 作用 e.offsetParent 返回作为该元素带有定位的父级元素，如果父级没有定位则返回body e.offsetTop 返回元素相对带有定位父元素上方的偏移 e.offsetLeft 返回元素相对带有定位父元素左边框的偏移 e.offse
[UE4]AnimOffset偏移动画
weixin_30735745的博客
05-17 440
在每个在偏移动画要用到的动画文件中设置中设置上图属性。 也可以选择多个动画文件： 转载于:https://www.cnblogs.com/timy/p/9050961.html
jQuery.dropotron = function(options) { // Settings var settings = jQuery.extend({ selectorParent: null, // The parent jQuery object baseZIndex: 1000, // Base Z-Index menuClass: 'dropotron', // Menu class (assigned to every UL) expandMode: 'hover', // Expansion mode ("hover" or "click") hoverDelay: 150, // Hover delay (in ms) hideDelay: 250, // Hide delay (in ms; 0 disables) openerClass: 'opener', // Opener class openerActiveClass: 'active', // Active opener class submenuClassPrefix: 'dropotron-level-', // Submenu class prefix mode: 'slide', // Menu mode ("instant", "fade", "slide", "zoom") speed: 'fast', // Menu speed ("fast", "slow", or ms) easing: 'swing', // Easing mode ("swing", ???) alignment: 'left', // Alignment ("left", "center", "right") offsetX: 0, // Submenu offset X offsetY: 0, // Submenu offset Y globalOffsetY: 0, // Global offset Y IEOffsetX: 0, // IE Offset X IEOffsetY: 0, // IE Offset Y noOpenerFade: false, // If true, when in "fade" mode the top-level opener will not fade with the menu detach: true // Detach second level menus (to prevent parent styling from bleeding through) }, options);
最新发布
06-11
这段代码是 `jQuery.dropotron` 函数的主体部分，用于生成下拉菜单。 首先，通过 `jQuery.extend()` 方法将传入的 `options` 对象与默认设置进行合并，得到最终的 `settings` 对象，其中包含了菜单的各种设置，例如： - `selectorParent`：菜单的父级元素； - `baseZIndex`：菜单的基础 Z-Index 值； - `menuClass`：菜单的样式类； - `expandMode`：菜单的展开模式（鼠标悬停或点击）； - `hoverDelay`：鼠标悬停延迟时间； - `hideDelay`：鼠标移开后菜单的隐藏时间； - `openerClass`：触发菜单展开的元素的样式类； - `openerActiveClass`：触发菜单展开的元素的激活状态样式类； - `submenuClassPrefix`：子菜单的样式类前缀； - `mode`：菜单展开的动画效果（即菜单的模式：直接显示、渐变、滑动或缩放）； - `speed`：菜单展开的速度； - `easing`：菜单展开的缓动函数； - `alignment`：菜单的对齐方式； - `offsetX` 和 `offsetY`：子菜单的偏移量； - `globalOffsetY`：整个菜单的全局偏移量； - `IEOffsetX` 和 `IEOffsetY`：针对 IE 浏览器的偏移量； - `noOpenerFade`：如果为 true，当菜单展开时，顶级触发元素不会渐变； - `detach`：是否将二级菜单从父级菜单中分离（以防父级菜单的样式影响子菜单）。 然后，该函数会对菜单的每个子菜单进行遍历，设置其初始状态和绑定事件。具体实现过程较为复杂，包括以下几个主要步骤： - 为子菜单添加样式类； - 设置子菜单的位置； - 绑定鼠标悬停或点击事件，根据 `expandMode` 展开菜单； - 绑定菜单的隐藏事件。 最后，该函数返回菜单的 jQuery 对象，供调用者使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值