封装动画以及原理分析过程

动画得原理以及封装分析

第一步 核心原理:通过定时器 setInterval() 不断移动盒子位置。
实现步骤:

  1. 获得盒子当前位置
  2. 让盒子在当前位置加上移动距离
  3. 利用定时器不断重复这个操作
  4. 加一个结束定时器的条件
  5. 注意此元素需要添加定位,才能使用element.style.left

第二步 函数需要传递2个参数,动画对象(就是你给谁设置动画)和移动到的目标距离。

第三步 动画函数给不同元素记录不同定时器 在我们日常开发中如果多个元素都使用这个动画函数,每次都要var 声明定时器 这会导致我们得代码效力变低。我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)。核心原理:利用 JS 是一门动态语言,可以很方便的给当前对象添加属性

第四步 缓动效果及原理
缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来
思路:

  1. 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。

  2. 核心算法: (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长

  3. 停止的条件是: 让当前盒子位置等于目标位置就停止定时器

  4. 注意步长值需要取整

    注意:
    如果我们不要缓动效果 就是 盒子是当前的位置 + 固定的值 10
    如果要缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)

第五步 动画函数多个目标值之间移动
比如我可以让动画函数从800移动到500 500移动到800 但是我们要判断取整数才能准确到达目标位置
判断步长距离是正值还是负值
如果是正值,则步长 往大了取整
如果是负值,则步长 向小了取整

第六步 动画函数添加回调函数
回调函数原理:函数可以作为一个参数。将这个函数作为参数传到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调。回调函数写的位置:定时器结束的位置

总结: 1.我们在移动动画距离得时候一定要取整数不然它得目标位置有差距,2.如果我们是给元素添加得是点击事件后才让动画走得,这时候会有一个Bug那就是你反复得点击按钮,这时候元素会走的越来越快,这是因为你每点击一次,定时器就每执行了一次所以你点击得越快那么你速度就走得越快,那我们怎么解决勒?那就是在你点击下一次之前先清除以前得定时器(动画函数),只保留当前的一个定时器执行。这样不管你点击了多少次,都只是点击了一次 3.回调函数是写在动画函数形参最后一个得,而调用回调函数则是写在定时器结束里面,回调函数在结束定时器后才会去执行,是最后一个执行得,判断它有参数传过来才去执行,如果没有则不执行

代码演示

    // 缓动动画函数封装obj目标对象 target目标位置  callback = function(){}  调用的时候callback()
    function animate(obj, target, callback) {
   
        clearInterval(obj.timer); // 先清除以前的定时器,只保留当前的一个定时器执行
        obj.timer = setInterval(function(
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Validation 是一种基于注解的数据校验框架,可以对 Java 对象进行校验,常用于 Web 表单数据的校验。其核心原理是基于 Java 标准库中的 JSR-303 规范,通过注解标记 Java 类的字段,然后使用 Validator 接口对标记的字段进行校验。 Spring Validation 的校验流程大致如下: 1. 在 Controller 层接收表单数据,将数据封装成 Java 对象。 2. 对 Java 对象进行校验,检测是否符合预定规则。 3. 如果校验失败,返回错误信息。 Spring Validation 的核心接口是 Validator,其定义如下: ```java public interface Validator { boolean supports(Class<?> clazz); void validate(Object target, Errors errors); } ``` 其中,supports 方法用于判断该 Validator 是否支持校验指定的类型,validate 方法用于对指定的对象进行校验。 Spring Validation 内部使用了一个 Errors 对象来记录校验错误信息,如下所示: ```java public interface Errors { void reject(String errorCode, Object[] errorArgs, String defaultMessage); void rejectValue(String field, String errorCode, Object[] errorArgs, String defaultMessage); boolean hasErrors(); } ``` 其中,reject 方法用于记录全局错误信息,rejectValue 方法用于记录字段错误信息,hasErrors 方法用于判断是否存在校验错误信息。 Spring Validation 是通过反射机制读取 Java 对象的注解信息来完成校验的。在执行校验时,Spring Validation 会将 Java 对象的每个字段和对应的约束注解信息一一对应,然后根据注解信息进行校验。 Spring Validation 的源码分析较为复杂,主要涉及到反射、注解、AOP 等技术,需要深入了解 Spring 框架的原理和机制。如果需要深入学习 Spring Validation 的源码,可以阅读 Spring 源码中的 Validation 相关模块。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值