使用 lottie 动画 WordPress 的网站示例

Lottie 是一款用于渲染 Adobe After Effects 动画的跨平台库，能够以 JSON 格式运行在移动设备，Web 上。在 WordPress 网站中使用 Lottie，可以为网站添加更多生动活泼的动画效果，获得更好的用户体验。

Lottie 在 WordPress 中的安装

在 WordPress 中使用 Lottie 需要依赖 Lottie WordPress 插件。在您的 WordPress 后台，前往插件管理器并搜索 Lottie WordPress。安装并启用该插件。

导入 Lottie 动画

Bodymovin 是 Lottie 的一个主要导出工具。在 After Effects 中使用 Bodymovin 导出 JSON 文件，然后将该文件上传到 WordPress 网站中，或将其嵌入核心代码中。

通过上传 JSON 文件导入动画

在 WordPress 后台，前往“媒体”并创建一个新文件夹，命名为“Lottie Animations”。将您导出的 JSON 文件上传到该文件夹中。

在模板文件中，使用以下代码来嵌入动画：

<div class="animate-lottie" data-animation-url="<?php echo get_site_url(); ?>/wp-content/uploads/Lottie Animations/your-file-name.json"></div>

其中，data-animation-url 是动画 JSON 文件的路径。

在核心代码中导入动画

如果您想在这种情况下避免向网站上传文件以增加负载，则可以将动画 JSON 文件直接复制到 WordPress 主题的根目录中，并将其命名为 animation.json。

使用以下代码段在您的主题 functions.php 文件中添加 Lottie 的 JS 和 CSS 文件：

add_action('wp_enqueue_scripts', 'enqueue_lottie_assets');

function enqueue_lottie_assets() {
	wp_enqueue_script('lottie-js', 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js');
	wp_enqueue_style('lottie-css', 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.css');
}

最后，在模板文件中，使用以下代码来嵌入动画：

<div class="animate-lottie"></div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		var animation = bodymovin.loadAnimation({
			container: document.querySelector('.animate-lottie'),
			renderer: 'svg',
			loop: true,
			autoplay: true,
			path: '<?php echo get_template_directory_uri() . "/animation.json"; ?>'
		});
	});
</script>

结论

在 WordPress 网站中使用 Lottie，可以为用户提供更加活泼的动画效果，增强用户体验。尽管在一些网站上它可能不是必须的，但在需要增加动画效果的情况下，Lottie 则是非常方便的选择。