Paper.js 平滑动画效果实现解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00312/article/details/148377790

Paper.js 平滑动画效果实现解析

paper.js The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey 项目地址: https://gitcode.com/gh_mirrors/pa/paper.js

概述

本文将深入解析 Paper.js 中实现平滑动画效果的示例代码，展示如何利用 Paper.js 创建动态的平滑曲线动画。这个示例演示了如何通过鼠标交互控制动画效果，并实时切换平滑处理状态。

核心概念

1. 路径平滑处理

Paper.js 提供了 path.smooth() 方法，可以对路径进行平滑处理。示例中使用了 { type: 'continuous' } 参数，表示创建连续的平滑曲线，确保路径各段之间的平滑过渡。

2. 动画原理

示例通过 onFrame 事件处理函数实现动画效果，利用正弦函数生成波动效果，结合鼠标位置动态调整波动幅度。

代码解析

初始化阶段

var path = new Path({
    fillColor: 'black'
});

创建了一个黑色填充的路径对象，这是动画的主体。

function initializePath() {
    center = view.center;
    width = view.size.width;
    height = view.size.height / 2;
    path.segments = [];
    path.add(view.bounds.bottomLeft);
    for (var i = 1; i < points; i++) {
        var point = new Point(width / points * i, center.y);
        path.add(point);
    }
    path.add(view.bounds.bottomRight);
    path.fullySelected = true;
}

初始化函数设置了路径的起点、终点和中间的多个控制点，这些点将用于后续的动画变形。

动画实现

function onFrame(event) {
    pathHeight += (center.y - mousePos.y - pathHeight) / 10;
    for (var i = 1; i < points; i++) {
        var sinSeed = event.count + (i + i % 10) * 100;
        var sinHeight = Math.sin(sinSeed / 200) * pathHeight;
        var yPos = Math.sin(sinSeed / 100) * sinHeight + height;
        path.segments[i].point.y = yPos;
    }
    if (smooth)
        path.smooth({ type: 'continuous' });
}

onFrame 是动画的核心：

根据鼠标位置调整路径高度
使用正弦函数为每个控制点计算动态的 y 坐标
如果平滑选项开启，则对路径进行平滑处理

交互处理

function onMouseMove(event) {
    mousePos = event.point;
}

function onMouseDown(event) {
    smooth = !smooth;
    if (!smooth) {
        for (var i = 0, l = path.segments.length; i < l; i++) {
            var segment = path.segments[i];
            segment.handleIn = segment.handleOut = null;
        }
    }
}

onMouseMove 跟踪鼠标位置，影响动画效果
onMouseDown 切换平滑状态，关闭平滑时需要重置控制点的手柄

技术要点

路径平滑算法：Paper.js 的平滑算法基于贝塞尔曲线，continuous 类型确保曲线各段之间的连续性。
动画缓动效果：代码中使用 pathHeight += (center.y - mousePos.y - pathHeight) / 10 实现了缓动效果，使动画过渡更加自然。
正弦波应用：通过组合不同频率的正弦波，创建了复杂的波动效果，这是计算机图形学中常用的技术。