小程序集成Three.js，使用npm安装gsap动画库

Ltanke

已于 2024-01-11 10:28:39 修改

阅读量4.2k

点赞数 1

分类专栏：微信小程序文章标签：小程序动画

于 2022-12-28 16:19:03 首次发布

本文链接：https://blog.csdn.net/weixin_39318421/article/details/128469803

版权

0.视频演示

three.js集成gsap创建物体动画

gsap作为简单易用的补间动画库，获得开发者一致好评。

在小程序中，我们集成了Three.js第三方库，可以创建和加载模型及场景，但是做动画还是需要第三方库的支持。

下面详细说明如何在小程序中通过npm集成gsap库（集成其他第三方库过程也都是一样的）。

1.安装Node.js

npm作为Node.js的一个组件，我们很多时候需要用npm来安装第三方库。

这里对Node.js的安装不做过多赘述，网上有很多，可以百度查看一下。

2.指令 npm init

在开发者工具中，点击终端，新建终端，这时默认会进入项目根目录。

输入指令 npm init

提示输入

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ltanke

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序动画库

weixin_44593658的博客

09-14

3276

在pc端和移动端有很多方便使用的动画库，比较出名的是 Animate.css 今天给大家介绍一个小程序端的动画库，使用起来非常方便，效果也还不错其中大部分动画的来源于Animate.css 首先安装如果你的微信小程序项目基于 nodejs 开发，你可以使用 npm 安装，并拷贝到相关目录后 @import npm install ripples.wxss --save 直接 clone 或 download 仓库https://github.com/jeasonstudio/Ripples.wxs

npm配置three.js

weixin_58320459的博客

12-07

3756

基于there.js的node安装，以及parcel打包工具

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

前端Three.js入门（一）-Three的第一个简单的页面

最新发布

2301_79428107的博客

03-19

1054

小编想学点3d酷炫效果，迫不及died的点开了b站，立马点击第一个《老陈打码》的视频，开始了我的Three.js美妙（痛苦）之旅…先附上官网链接：https://threejs.org/

小程序自定义动画库

hello917的博客

12-23

387

//使用方法 import ani from '../../animate.js' //然后页面dom元素指定一个动画实例 <button bindtap="showPop" animation="{{ani}}">自定义动画</button> //然后直接调用动画方法 //需要传入this对象，及dom的动画实例对象 ani.shake(this,'ani') //ps 可自定义动画执行时间 //ani.shake(this,'ani',2000) ...

微信小程序Canvas动画库

08-10

本项目是为一套简单的小程序动画库 整体实现参考的cocos，API设置参考了cocos和laya 目前只支持本地图片和label渲染，后面有空再添加

Three.js使用动画库（ GSAP 一款基于 JavaScript 的 web动画库）

qq_45487080的博客

04-26

773

Three.js中文网1-17入门案例

探索CreateJS-WX：一款强大的微信小程序动画库

gitblog_00021的博客

04-04

850

探索CreateJS-WX：一款强大的微信小程序动画库 去发现同类优质开源项目:https://gitcode.com/ 项目简介是一个基于CreateJS的微信小程序动画解决方案，它将流行的CreateJS JavaScript库巧妙地移植到了微信小程序平台上。如果你熟悉CreateJS并且想要在微信小程序中创建丰富的交互式2D动画，那么这个项目是你不可或缺的工具。技术分析 CreateJS...

小程序集成Three.js开发常见问题

3D模型素材库

12-28

1365

使用Three.js框架开发小程序时常见问题的解决方法

movy.js：基于three.js和gsap的简易动画引擎

Three.js是一个流行的WebGL库，负责渲染3D图形，而GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，提供了全面的动画控制功能。Movy.js结合了这两者的优点，提供了一个高级的、面向动画的API，...

Three.js 扩展与插件：增强3D开发的利器

chaosweet的博客

01-09

1071

工具的力量在于它能将复杂的工作简化为简单的任务。

Movy.js动画引擎：Three.js与GSAP的融合

资源摘要信息:"movy.js是一款基于three.js和gsap的易于使用的动画引擎。它是用TypeScript编写的，并且可以通过npm进行安装。movy.js的主要特点包括易用性和基于three.js和gsap的强大功能。它提供了一个简单易用的API...

wxDraw一个轻量级的微信小程序2d动画绘制库

08-10

wxDraw 一个轻量级的微信小程序2d动画绘制库

three-npm:为了能够安装three.js的开发版本

05-14

three.js JavaScript 3D库该项目的目的是创建一个轻量级的3D库，其复杂度非常低，换句话说，就是傻瓜。该库提供<canvas>，<svg>，CSS3D和WebGL渲染器。 --- 用法下载并将其包含在您的html中。另外，请参阅。 < script src =" js/three.min.js " > </ script > 此代码创建一个场景，一个照相机和一个几何立方体，并将该立方体添加到场景中。然后，它为场景和相机创建一个<canvas>渲染器，并将该视口添加到document.body元素中。最后，它会为摄像机的场景内的立方体设置动画。 < script > var scene , camera , renderer ; var geometry , material , mesh ; init ( ) ; animate ( ) ; fu

three-plain-animator：Three-Plain-Animator是一个为Threejs开发人员提供支持2D动画的软件包

02-03

欢迎来到三平原动画师 Three-Plain-Animator是为threejs开发人员提供的软件包，用于支持2D动画。安装该软件包可通过npm获得： npm i three-plain-animator 用法有两个主要的类可以使用： PlainAnimator PlainSingularAnimator 第一个用于连续动画，如行走。第二个是用于动画，该动画只能播放一次，然后在动画的最后一帧停止播放。例这是一个简单的示例，其中荷马·辛普森动画。我假设使用threejs创建基本场景不是该示例的一部分。因此，我将只显示不必要的代码，以免混乱。我将gif转换为sprite，

微信小程序使用Animate.css动画库

qq_61122628的博客

10-27

5481

在小程序中，我们添加适当的动画样式，不仅会让页面更加炫酷，还会提高用户的体验效果。文件中写入 @import './utils/animate.wxss' 即可：如果放在其他位置，自己改下路径就OK的。安装成功后：会有个--> node_modules 文件夹，(二、修改animate.css文件后缀改为wxss。包名的话，可能是微信开发者工具没有加载出来，可以。一、小程序中安装Animate.css。可以查看我们安装库的版本是多少，如下。animate.wxss 中的。好了，到这就结束了，

三、gsap（动画）

张先森的博客

09-25

303

GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是JQuery的20倍。一个为ActionScript 版本，已经在flash平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎，一直深受ASer（学ActionScript的人都叫自己 ASer）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。

three.js中通过gsap动画库实现物体的动画

jieyucx的博客

06-20

1925

是一个JavaScript动画库，由GreenSock公司开发，用于在Web应用程序中创建高性能动画。使用GSAP可以通过一些简单的动画操作来实现复杂的动画效果，例如等工具。

Ripples.wxss: 微信小程序CSS3动画库实战指南

gitblog_00447的博客

08-26

410

Ripples.wxss: 微信小程序CSS3动画库实战指南 Ripples.wxssCSS3 animation library for wechat app.项目地址:https://gitcode.com/gh_mirrors/ri/Ripples.wxss 项目介绍 Ripples.wxss 是专为微信小程序设计的CSS3动画库，灵感汲取自知名的Animate.css。它旨在为微信小程...

three.js-结合gsap动画库，给我们的盒子添加旋转_移动动画

公众号 @ 桃小瑞

12-06

2380

在 three.js 中结合 gsap 动画库，添加动画使我们的模型更加顺畅的移动和旋转，或者执行其他的动画效果。