Kinet是一个极其轻量级的JavaScript动画库-BFW插件库

Kinet是一个极其轻量级的JavaScript动画库

Kinet是一个极其轻量级的JavaScript动画库，它允许你用一种弹簧效果的动画来改变值，并能够在任何地方使用这些值。

这个库的特点在于它既简单易用，又不失灵活和强大，适合那些希望在项目中实现自然动态效果的开发者使用。

安装

cdn

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kinet.min.js"></script>

npm

npm install kinet --save
// import needed modules from npm
import Kinet from 'kinet';

使用方法：

引入 Kinet 至你的项目。

创建一个 Kinet 实例，并设置你想要的初始值和参数。

通过调用实例的 .animate 方法来改变值，并创建一个动画。

你可以通过 .on('tick', function) 来监听每次值的变化，并将其应用到你的项目中，比如更新DOM元素的样式。

示例代码：

下面是使用 Kinet 的一个简单例子，展示了如何在网页中一个跟随鼠标顺滑移动的圆。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
    <style>
        #cur {
          position: fixed;
          background: teal;
          border-radius: 50%;
          left: 50%;
          top: 50%;
          width: 200px;
          height: 200px;
          margin: -100px 0 0 -100px;
          pointer-events: none;
          animation: kf-cur 1.8s ease infinite;
        }
        
        @keyframes kf-cur {
          0% {
            background: teal;
          }
          50% {
            background: orange;
          }
          100% {
            background: teal;
          }
        }
    </style>




</head>

<body translate="no">
    <div id="cur"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/kinet.min.js"></script>

    <script>
        // create instance of kinet with custom settings
        var kinet = new Kinet({
          acceleration: 0.06,
          friction: 0.20,
          names: ["x", "y"] });
        
        
        // select circle element
        var circle = document.getElementById('cur');
        
        // set handler on kinet tick event
        kinet.on('tick', function (instances) {
          circle.style.transform = `translate3d(${instances.x.current}px, ${instances.y.current}px, 0) rotateX(${instances.x.velocity / 2}deg) rotateY(${instances.y.velocity / 2}deg)`;
        });
        
        // call kinet animate method on mousemove
        document.addEventListener('mousemove', function (event) {
          kinet.animate('x', event.clientX - window.innerWidth / 2);
          kinet.animate('y', event.clientY - window.innerHeight / 2);
        });
    </script>


</body>

</html>

代码解析：

创建Kinet实例，设置为影响x和y两个数值。

选中ID为cur的元素，也就是上面HTML中定义的圆形<div>。

设置一个事件处理器，当Kinet实例的tick事件触发时，根据动画实例的当前x和y值以及它们的速度来改变圆形<div>的位置和旋转角度。

在整个文档上添加mousemove事件监听器，当鼠标移动时，调用Kinet的animate函数来按鼠标位置改变x和y的动画数值。

这只是Kinet能力的一小部分示例。由于它的设计旨在灵活、轻量级，你可以将它应用于更复杂的动画场景中，包括响应用户输入、数据可视化、交互式界面设计等等。

gihub地址:https://github.com/gmrchk/kinet