当前位置: 首页 > 工具软件 > Popmotion > 使用案例 >

popmotion ——2017年最火的动画集合

叶允晨
2023-12-01

这里先给popmotion的官方地址www.popmotion.io/

当然作为出色的轻量级动画,github上面也是有的github.com/Popmotion/p…


看着这么出色的颜色搭配和设计,都已经忍不住想要使用的,咱们在学习

前端的时候,也不要忘记我们的审美也是很高的,虽然和出色的UI设计师还有点距离吧,我们也要学会欣赏。

我们新建一个index.html:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" href="./animation.css"></head><body>    <h1>Animtion</h1>    <div class="box">
    </div>    <script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>    <script src="./animation.js"></script></body></html>复制代码

这里我们引入popmotion的js,并且引入了本地的css代码 和 animation.js代码,我们新建animation.css代码:

.box {
  width: 100px;
  height: 100px;
  background-color: #0074d9;
  border-radius: 50%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 400px;
}复制代码

再创建一个animation.js文件:

const ball = document.querySelector(".box");
const divStyle = popmotion.styler(ball);
const ballXY = popmotion.value({ x:0,y:0},divStyle.set);
popmotion.listen(ball,"mousedown touchstart").start(e => {    
    e.preventDefault();    
    popmotion.pointer(ballXY.get()).start(ballXY);
});
popmotion.listen(document,"mouseup").start(() => {    
popmotion        
.spring({           
     x: -10,           
     y: -10,            
     background: 'rgba(161, 0, 246, 1)',           
     boxShadow: '10px 10px 20px rgba(161, 0, 246, 0.2)',           
     transition: { duration: 700 }        
})        
.start(ballXY);})复制代码

我们就可以看到下面的模样

当然这些js是popmotion API文档中的,我们可以根据他们API才制作我们自己想要的动画.

有一个问题就是一般的网站都是拥有至少10个的依赖项,而且如果我们把所有的脚本都放在HTML下也是不可行的,接下来我们有一种方法可以解决这个问题


我们现在本地安装node.js,然后我们安装Parcel工具,他可以将所有的代码都捆绑到一个小包中

cnpm install --global parcel-bundler

1、我们去删除inde.html文件中的

<script src="https://unpkg.com/popmotion@8.1.24/dist/popmotion.global.min.js"></script>复制代码

2、在animation.js中第一行引入popmotion:

const popmotion = require("popmotion");复制代码

3、执行命令cnpm init -y,此时在项目的根目录下会生成一个package.json

文件,这个文件是node配置的方式。

cnpm init -y复制代码

4、执行命令,从服务器下载popmotion文件,辞职执行成功之后会在你的项目文件中新增一个node_modules目录

cnpm install popmotion复制代码

5、执行命令 ,他会告诉你一个服务器在http://localhost:1234运行所花费的时间

parcel index.html

复制代码


我们在本地输入localhost:1234.就会看到我们的项目也在运行



 类似资料: