Lottie Emojis 😄
一款有关于emoji表情包的Lottie动画库。
Installation
lottie-emojis
库需要搭配 lottie-web
库一起使用。
# using npm
npm install lottie-web lottie-emojis --save
# using yarn
yarn add lottie-web lottie-emojis
# using pnpm
pnpm add lottie-web lottie-emojis
Usage
CDN
<script src="./lottie.js"></script>
<script>
lottie.loadAnimation({
container: element, // DOM元素
renderer: 'svg',
loop: true,
autoplay: true,
path: `https://unpkg.com/lottie-emojis/json-data/${jsonFileName}.json` // 对应动画的json,具体名字可查下方表格的 CDN引入文件名 列
})
</script>
NPM
import Lottie from 'lottie-web'
import { Happy } from 'lottie-emojis' // 引入动画JSON文件,具体名字可查下方表格的 模块名 列
Lottie.loadAnimation({
container: element, // DOM元素
renderer: 'svg',
loop: false,
autoplay: true,
animationData: Happy
})
Data Map
Emojis表情 | 表情名 | 模块名 | CDN引入文件名 |
---|---|---|---|
![]() |
开心 |
Happy |
happy |
![]() |
难过 |
Frown |
frown |
![]() |
喜欢 |
Drool |
drool |
![]() |
惊讶 |
Flushed |
flushed |
![]() |
酷 |
Cool |
cool |
![]() |
流泪 |
Sob |
sob |
![]() |
愉悦 |
Joyful |
joyful |
![]() |
天呐 |
OMG |
omg |
![]() |
睡 |
Sleeping |
sleeping |
![]() |
笑泪 |
SmilingTear |
smiling-tear |
![]() |
沮丧 |
Downcast |
downcast |
![]() |
愤怒 |
Angry |
angry |
![]() |
眨眼吐舌 |
WinkingTongue |
winking-tongue |
![]() |
咧嘴笑 |
Grinning |
grinning |
![]() |
寂静的 |
Hushed |
hushed |
![]() |
担心 |
Worried |
worried |
![]() |
窥视 |
Peaking |
peaking |
![]() |
疲惫 |
Weary |
weary |
![]() |
呕吐 |
Puke |
puke |
![]() |
轻笑 |
Chuckle |
chuckle |
![]() |
亲亲 |
Kissing |
kissing |
![]() |
翻白眼 |
RollingEyes |
rolling-eyes |
![]() |
打呵欠 |
Yawning |
yawning |
![]() |
可怕 |
Fearful |
fearful |
![]() |
焦虑 |
Anxious |
anxious |
![]() |
尖叫 |
Screaming |
screaming |
![]() |
飞吻 |
ThrowingKiss |
throwing-kiss |
![]() |
骂 |
Scold |
scold |
![]() |
思考 |
Thinking |
thinking |
![]() |
嘘 |
Shushing |
shushing |
![]() |
头晕 |
Dizzy |
dizzy |
![]() |
冷 |
Cold |
cold |
![]() |
打喷嚏 |
Sneezing |
sneezing |
![]() |
测温 |
Thermometer |
thermometer |
![]() |
头绷带 |
HeadBandage |
head-bandage |
![]() |
挑眉 |
RaisedEyebrow |
raised-eyebrow |
![]() |
摊手 |
OpenHands |
open-hands |
![]() |
扮鬼脸 |
Grimacing |
grimacing |
![]() |
强颜欢笑 |
ForceSmiling |
force-smiling |
![]() |
生病 |
Sick |
sick |
![]() |
说谎 |
Lying |
lying |
![]() |
滑稽 |
Zany |
zany |
![]() |
爱意 |
Hearts |
hearts |
![]() |
哭 |
Cry |
cry |
![]() |
解脱 |
Relief |
relief |
![]() |
融化 |
Melted |
melted |
![]() |
困惑 |
Confounded |
confounded |
![]() |
滚 |
Roll |
roll |
![]() |
喜气洋洋 |
Beam |
beam |
![]() |
斜眼 |
SideEye |
side-eye |
![]() |
星星眼 |
StarEye |
star-eye |
![]() |
馋嘴 |
Glutton |
glutton |
![]() |
可口 |
Delicious |
delicious |
![]() |
笑眼 |
SmilingEyes |
smiling-eyes |
![]() |
醉 |
Drunk |
drunk |
![]() |
流汗 |
Sweat |
sweat |
![]() |
伤心 |
Sad |
sad |
![]() |
热 |
Hot |
hot |
![]() |
震惊 |
Astonished |
astonished |
![]() |
忧虑 |
Concern |
concern |
![]() |
痛苦 |
Anguished |
anguished |
![]() |
困惑 |
Confused |
confused |
![]() |
中性 |
Neutral |
neutral |
![]() |
敬礼 |
Salute |
salute |
![]() |
面无表情 |
Expressionless |
expressionless |
![]() |
无语 |
Speechlessness |
speechlessness |
![]() |
拉链 |
Zipper |
zipper |
![]() |
颠倒 |
UpsideDown |
upside-down |
![]() |
沉思 |
Pensive |
pensive |
![]() |
坚持 |
Persevere |
persevere |
![]() |
踌躇满志 |
Smug |
smug |
![]() |
隐藏 |
Hide |
hide |
![]() |
牛仔 |
Cowboy |
cowboy |
![]() |
派对 |
Party |
party |
![]() |
亲吻 |
Kiss |
kiss |
![]() |
眨眼 |
Wink |
wink |
![]() |
眯眼 |
Squint |
squint |
![]() |
舌头 |
Tongue |
tongue |
![]() |
微笑 |
Smile |
smile |
![]() |
松了口气 |
Relieved |
relieved |
![]() |
困 |
Sleepy |
sleepy |
![]() |
笑哭 |
TearsOfJoy |
tears-of-joy |
![]() |
鄙视 |
Contempt |
contempt |
![]() |
恳求 |
Plead |
plead |
![]() |
感激 |
Gratitude |
gratitude |
![]() |
惊愕 |
Amazement |
amazement |
![]() |
脑袋爆炸 |
MindBlown |
mind-blown |
![]() |
疲劳 |
Tired |
tired |
![]() |
光圈 |
Halo |
halo |
![]() |
惊喜 |
Surprise |
surprise |
![]() |
傻笑 |
Smirking |
smirking |
![]() |
钱 |
Money |
money |
![]() |
恶心 |
Nauseated |
nauseated |
![]() |
书呆子 |
Nerd |
nerd |
![]() |
单片眼镜 |
Monocle |
monocle |
![]() |
伪装 |
Disguised |
disguised |
![]() |
渺小 |
Smallness |
smallness |
![]() |
魔鬼 |
Demon |
demon |
![]() |
满分 |
FullScore |
full-score |
![]() |
嘴唇 |
Lips |
lips |
![]() |
红心 |
RedHeart |
red-heart |
![]() |
心碎 |
BrokenHeart |
broken-heart |
![]() |
绷带的心 |
BandagedHeart |
bandaged-heart |
![]() |
着火的心 |
FireHeart |
fire-heart |
![]() |
丘比特 |
Cupid |
cupid |
![]() |
心跳 |
BeatingHeart |
beating-heart |
![]() |
礼物的心 |
GiftHeart |
gift-heart |
![]() |
粉心 |
PinkHeart |
pink-heart |
![]() |
鼓掌 |
Clap |
clap |
![]() |
竖起大拇指 |
ThumbsUp |
thumbs-up |
![]() |
拇指向下 |
ThumbsDown |
thumbs-down |
![]() |
胜利 |
Victory |
victory |
![]() |
挥手 |
Wave |
wave |
![]() |
没问题 |
OK |
ok |
![]() |
向上指 |
PointingUp |
pointing-up |
![]() |
向下指 |
PointingDown |
pointing-down |
![]() |
肌肉 |
Muscle |
muscle |
![]() |
火 |
Fire |
fire |
![]() |
闪电 |
Electricity |
electricity |
![]() |
发光星星 |
GlowingStar |
glowing-star |
![]() |
相机 |
Camera |
camera |
![]() |
祈祷 |
Worship |
worship |
![]() |
咖啡 |
Coffee |
coffee |
![]() |
啤酒 |
Beers |
beers |
![]() |
香槟 |
Champagne |
champagne |
![]() |
碰杯 |
Clinking |
clinking |
![]() |
红酒 |
Wine |
wine |
![]() |
彩纸球 |
ConfettiBall |
confetti-ball |
![]() |
礼物 |
Gift |
gift |
![]() |
生日蛋糕 |
BirthdayCake |
birthday-cake |
![]() |
正中准心 |
DirectHit |
direct-hit |
![]() |
气球 |
Balloon |
balloon |
![]() |
财富 |
MoneyWing |
money-wing |
![]() |
火箭 |
Rocket |
rocket |
![]() |
玫瑰 |
Rose |
rose |
![]() |
枯萎 |
Wilt |
wilt |
![]() |
铃铛 |
Bell |
bell |
![]() |
旗子 |
Flag |
flag |
![]() |
学士帽 |
Graduate |
graduate |
![]() |
彩虹 |
Rainbow |
rainbow |
![]() |
烟花 |
Fireworks |
fireworks |
![]() |
鞭炮 |
Firecracker |
firecracker |
![]() |
水滴 |
Droplet |
droplet |
![]() |
正确 |
Correct |
correct |
![]() |
错误 |
Wrong |
wrong |
![]() |
问号 |
Question |
question |
![]() |
感叹号 |
Exclamation |
exclamation |
![]() |
眼睛 |
Eyes |
eyes |
![]() |
小刀 |
Knife |
knife |
![]() |
炸弹 |
Bomb |
bomb |
![]() |
外星人 |
Alien |
alien |
![]() |
游戏机 |
Game |
game |