教学:创建动画动画动画

5 min read

学习使用字母拼接动画为Instagram Stories创建一个捕眼动画动机引用.

时间: 10分钟 困难: 初学者

你会创造什么

令人惊叹的动画动画动画引用了三个短语,每个短语使用不同的字母拼接风格和错开的揭示动画.

动画动画引文,带有字母拼贴效果

你会学会的

  • 字母拼接风格 — 霓虹牌,杂志剪辑,剪纸效果
  • 交错动画 — 字母逐个出现
  • 地面发电机-动画日光爆发背景
  • Keyframe 动画 — 色彩过渡和闪光效果

步骤1:布置布景

  1. 打开 PinePaper 编辑器
  2. 点击页脚中的canvas 大小下降
  3. 选择 Instagram Story (1080x1920)
Canvas size selection
选择Instagram 故事大小

步骤2: 添加动画背景

  1. 单击右侧面板中的 scenes 标签
  2. 将背景模式设置为 Generator
  3. 选择太阳爆发
  4. 配置颜色 :
    • 颜色1:#FF6B6B (口红)
    • 颜色 2: #4ECDC4 (teal)
    • 颜色 3:#FFE66D (黄色)
  5. 设定雷计数:16
  6. 启用Animate并设置速度:0.5
  7. 点击Generate
Sunburst background
动画日晒背景 充满活力的颜色

第3步: 创建“ DREAM BIG ” 信件拼接

  1. 单击工具栏中的 字母拼贴 按钮( 或按 L)
  2. 类型:DREAM BIG
  3. 配置样式 :
    • 样式: 样式
    • 调色板: 尼昂
    • 字体大小: 72
    • 角半径: 8
    • 启用阴影
  4. 位于中顶区域(x:540,y:750)

代码等效 :

const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540,
  y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

第4步:在"DREAM BIG"中添加错位动画

  1. 在选定拼贴时,打开时间线面板
  2. 点击 Add 错开动画
  3. 配置 :
    • 效果:输入
    • 延迟:0.08
    • 会期:0.5s
    • 序列:林纳 (左对右)
    • 缓解:缓解

代码等效 :

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});
Letter collage animation
以交错式流行效果的动画

第5步:创建“ WORK HARD” 信件拼接

  1. 创建另一个字母拼贴符 :

    • 案文:工作困难
    • 样式 : Magazine (随机音符外观)
    • 调色板: 马加锡
    • 字体大小: 60
    • 职位: (540, 920)

  2. 添加交错动画 :

    • 效果: 淡出滑动
    • 延迟:0.1s
    • 序列: Wave (流出)

代码等效 :

const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540,
  y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

步骤 6: 创建“ STAY HUMBLE” 信件拼接

  1. 创建第三个字母拼接 :

    • 案文:STAY HUMBLL
    • 样式: 剪纸 (3D 阴影效果)
    • 字体大小: 68
    • 位置: (540, 1100)

  2. 以弹跳方式添加交错动画 :

    • 效果:输入
    • 拖延:0.06s
    • 序列:中心(从中向外的检索)
    • 放松:弹出

代码等效 :

const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540,
  y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});
All phrases visible
所有三种风格不同的短语

步骤 7: 增加装饰性的角线

  1. 为装饰分隔器创建矩形 :

    • 宽度:500,高度:8
    • 颜色:白色(#FFFFFF)
    • 短语下面的位置

  2. 添加色彩脉冲的键框动画 :

代码等效 :

const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.0, properties: { fillColor: '#FFFFFF' } },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

步骤 8: 预览和播放

  1. 按Space播放动画
  2. 时间线显示6秒环
  3. 看着错位显示:
    • "DREAM BIG"一字不差
    • "WORK HARD"的滑动带有波效应
    • "Stay Humble"从中央向外反弹

步骤9:导出

为Instagram Story (视频)

  1. 点击 出口 按钮
  2. 选择WebM(推荐)或MP4
  3. 配置 :
    • 会期:6秒
    • 帧率 : 30 fps
    • 质量:高
  4. 点击 出口 等待下载

其他平台

平台 格式 页:1
Instagram 故事 MP4/WebM 导弹 1080×1920, up to 15s
Instagram 邮报 MP4 密码 将帆布改为 1080x1080
叮当 MP4 密码 1080x1920, 与史诗相同
推特/ (简体中文). 页:1 GIF 密码 更好的自动播放支持

完整代码

这是重新制作这部动画的完整代码:

// Setup canvas
app.setCanvasSize('instagram-story');

// Animated sunburst background
app.executeGenerator('drawSunburst', {
  colors: ['#FF6B6B', '#4ECDC4', '#FFE66D'],
  rayCount: 16,
  animate: true,
  animationSpeed: 0.5
});

// "DREAM BIG" - Neon tile style
const dreamBig = app.letterCollage.create('DREAM BIG', {
  style: 'tile',
  palette: 'neon',
  x: 540, y: 750,
  fontSize: 72,
  cornerRadius: 8,
  shadowEnabled: true
});

app.letterCollage.applyStaggeredAnimation(dreamBig.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.5,
  sequence: 'linear',
  easing: 'easeOut'
});

// "WORK HARD" - Magazine ransom style
const workHard = app.letterCollage.create('WORK HARD', {
  style: 'magazine',
  palette: 'magazine',
  x: 540, y: 920,
  fontSize: 60
});

app.letterCollage.applyStaggeredAnimation(workHard.collageId, {
  effect: 'fadeSlideUp',
  staggerDelay: 0.1,
  duration: 0.6,
  sequence: 'wave',
  easing: 'easeOut'
});

// "STAY HUMBLE" - Paper cut style
const stayHumble = app.letterCollage.create('STAY HUMBLE', {
  style: 'paperCut',
  x: 540, y: 1100,
  fontSize: 68
});

app.letterCollage.applyStaggeredAnimation(stayHumble.collageId, {
  effect: 'popIn',
  staggerDelay: 0.06,
  duration: 0.4,
  sequence: 'center',
  easing: 'bounce'
});

// Accent line with color animation
const accentLine = app.create('rectangle', {
  x: 540, y: 1280,
  width: 500, height: 8,
  color: '#FFFFFF'
});

app.addAnimation(accentLine.data.id, [
  { time: 1.5, properties: { opacity: 0, scaleX: 0 } },
  { time: 2.0, properties: { opacity: 1, scaleX: 1 }, easing: 'easeOut' },
  { time: 3.8, properties: { fillColor: '#000000' }, easing: 'easeInOut' },
  { time: 4.6, properties: { fillColor: '#FFFFFF' }, easing: 'easeInOut' }
]);

// Play the 6-second loop
app.playKeyframeTimeline(6, true);

快速启动: 使用模板

而不是从零开始建造, 加载预建的模板 :

  1. 打开 模板面板 (右侧栏)
  2. 选择类别:社会媒体
  3. 点击动机引文
  4. 模板装入所有动画

字母拼贴样式

样式 听着 最佳时间
平铺 文字/拼字块 游戏、文字谜题
杂志 兰森笔记剪辑 爱迪,艺术
剪纸 三维阴影深度 工艺美学
折叠 折叠 现代、维
渐变 变色字母 现代活力

错位顺序图案

顺序 效果
linear 从左到右
reverse 右对左
center 中间向外
random 随机顺序
wave 正波计时

Pro 提示

联系事项——关于暗色背景的轻文本(反之亦然)对于可读性至关重要.

Stagger计时 — 字母间0.05-0.1s感觉自然. 太快看起来是机械的.

混合风格 — 对每个短语使用不同的字母拼接风格,增加了视觉兴趣.

Bounce for criminal——关于"STAY HUMBLE"的bounce宽松引起了额外的注意.

下一步

  • 字母拼接引用——所有样式和选项
  • [关键框架编辑器] (/features/keyframes)——自定义计时控制
  • 效果——添加火花和亮点
  • 物理动画——高级缓和效应