首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
交互与动画
订阅
keepinglight
更多收藏集
微信扫码分享
微信
新浪微博
QQ
19篇文章 · 0订阅
剖析 lottie-web 动画实现原理
Lottie 是一个复杂帧动画的解决方案,它提供了一套从设计师使用 AE(Adobe After Effects)到各端开发者实现动画的工具流。在设计师通过 AE 完成动画后,可以使用 AE 的扩展程序 Bodymovin 导出一份 JSON 格式的动画数据,然后开发同学可以通…
Lottie - 轻松实现复杂的动画效果
1. Lottie 介绍 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案,设计师可以使用 Adobe After Effects 设计出漂亮的动画之后,使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,就可以直接…
游戏开发 | Phaser初识
开发网页游戏,很久之前用AS3做合金弹头,现在Flash慢慢没落之后,新一代的H5游戏引擎崛起,比较知名的有coco2d.js、Unity-2D、laya,以及老东家的 Egret2D、Egret3D
游戏开发 | Phaser中的游戏对象
前面说道Phaser是H5 2D游戏开发的开源免费框架,支持JS和TS,基于Pixi.js引擎,内置游戏对象的物理属性,渲染模式同时支持Canvas和WebGL,基于浏览器支持可自由切换
【前端图形学】如何判断一条路径存在交叉
在可视化应用中,我们经常会遇到需要判断一个路径是否存在交叉的需求。根据路径交叉与否可以判断多边形是否是简单多边形,以及判断交通路线是否有十字路口等等。 这个问题实际上本质上是判断两个线段是否相交。因为路径是由线段构成,我们只要判断除了相邻线段外,没有其他线段两两相交即可,JS代…
phaser3+react做一款类似口红机的小游戏
最近项目开发中需要做一款类似于商场里的口红机游戏,看到GitHub上有推荐phaser作为游戏/动画框架,学习并开发了一款,把学习过程和开发过程中遇到的问题记录一下。
使用 Phaser3+Matter.js 实现“合成大西瓜”游戏
最近有一款“合成大西瓜”的小游戏有点火,试玩了一下,玩法比较简单,实现难度也不大,所以参照游戏原型自己实现了一下,游戏开发主要使用了 Phaser 游戏框架,本文主要分享游戏功能的具体实现,对框架使用的 API 不会做过多介绍。 游戏的玩法在于合理控制下落的点避免空间的浪费,在…
巧妙实现带圆角的渐变边框
这个问题本身不难,实现的方法也有一些,主要是有一些细节需要注意。 border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 border 的官方规范) 新增的一个…
所有前端都要看的2D游戏化互动入门基础知识
背景 现在越来越多的公司和APP开始使用游戏化的方式去做产品了,所谓游戏化,是指在非游戏环境中将游戏的思维和游戏的机制进行整合运用,以引导用户互动和使用的方法。支付宝里面的蚂蚁庄园、蚂蚁森林,通过游戏
我写CSS的常用套路
本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。 有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。 那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动…