{"id":5697,"date":"2024-04-14T21:03:22","date_gmt":"2024-04-14T13:03:22","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5697"},"modified":"2024-04-14T21:03:22","modified_gmt":"2024-04-14T13:03:22","slug":"give-motion-to-an-element-during-scrolling","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh\/give-motion-to-an-element-during-scrolling\/","title":{"rendered":"\u5728\u6efe\u52d5\u671f\u9593\u8ce6\u4e88\u5143\u7d20\u904b\u52d5"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">\n<p><\/p>\n<p>\u4f5c\u70ba After Effects \u548c Webflow \u4e2d\u7684 Lottie \u7cfb\u5217\u7684\u4e00\u90e8\u5206\uff0c\u6211\u5011\u5728 After Effects \u4e2d\u88fd\u4f5c\u4e86 Lottie \u52d5\u756b\u3002\u5728\u672c\u6307\u5357\u4e2d\uff0c\u6211\u5011\u5c07\u914d\u7f6e Lottie \u8cc7\u6e90\u4ee5\u5728\u5176\u53ef\u898b\u6642\u9032\u884c\u52d5\u756b\u8655\u7406\u3002<\/p>\n<p>\u6211\u5011\u5c07\u5206\u56db\u500b\u968e\u6bb5\u4f86\u5be6\u73fe\u9019\u500b\u76ee\u6a19\uff1a<\/p>\n<ol>\n<li>\u5408\u4f75 Lottie \u8cc7\u7522<\/li>\n<li>\u5efa\u7acb\u6efe\u52d5\u89f8\u767c\u5668<\/li>\n<li>\u8a2d\u5b9a\u52d5\u756b\n<\/li>\n<\/ol>\n<h2>1.\u5408\u4f75Lottie\u8cc7\u7522<\/h2>\n<p>\u60a8\u5fc5\u9808\u5f9e After Effects \u532f\u51fa Lottie \u52d5\u756b\u4e26\u5c07\u5176\u4e0a\u50b3\u5230\u60a8\u7684 Webflow \u5c08\u6848\u3002\u6211\u5011\u4f7f\u7528 Bodymovin \u532f\u51fa\u52d5\u756b\u3002\u5728\u6211\u5011\u5b8c\u6574\u6307\u5357\u7684\u6b65\u9a5f 3 \u548c 4 \u4e2d\u4e86\u89e3\u5982\u4f55\u5b8c\u6210\u6b64\u64cd\u4f5c\u3002\u00a0<\/p>\n<p>\u5c0d\u65bc\u6b64\u4f5c\u696d\uff0c\u60a8\u9700\u8981\u6e96\u5099 3 \u500b\u90e8\u5206 - \u8acb\u53c3\u95b1\u6211\u5011\u7684\u90e8\u5206\u6307\u5357\u6216 <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Animate-while-scrolling\">\u514b\u9686\u9805\u76ee<\/a>.<\/p>\n<p>\u82e5\u8981\u627e\u5230\u4e26\u65b0\u589e\u52d5\u756b\uff0c\u8acb\u9078\u64c7\u5de6\u5074\u908a\u6b04\u4e2d\u300c\u8cc7\u6e90\u300d\u9762\u677f\u4e2d\u7684\u5716\u50cf\u5716\u6a19\uff0c\u7136\u5f8c\u5c07\u52d5\u756b\u62d6\u66f3\u5230\u4e2d\u592e\u90e8\u5206\u3002\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109453\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109453\"><\/iframe><\/div>\n<\/figure>\n<p>\u51fa\u8272\u7684\uff01\u73fe\u5728\uff0c\u8b93\u6211\u5011\u5efa\u7acb\u89f8\u767c\u5668\u3002<\/p>\n<h2>2. \u8a2d\u5b9a\u57fa\u65bc\u6efe\u52d5\u7684\u89f8\u767c\u5668<\/h2>\n<p>\u5728\u6dfb\u52a0\u89f8\u767c\u5668\u4e4b\u524d\uff0c\u6211\u5011\u9700\u8981\u78ba\u4fdd\u9078\u64c7\u52d5\u756b\uff08\u800c\u4e0d\u662f\u5176\u4ed6\u5143\u7d20\uff09\u3002\u6211\u5011\u5e0c\u671b\u7576\u6211\u5011\u6efe\u52d5\u6642\u51fa\u73fe\u9019\u500b\u52d5\u756b\u3002\u5f9e\u53f3\u5074\u5074\u908a\u6b04\u7684\u4e92\u52d5\u9762\u677f\u4e2d\uff0c\u958b\u555f\u5143\u7d20\u89f8\u767c\u5668\u9078\u55ae\u4e26\u9078\u64c7\u5728\u8996\u5716\u4e2d\u6372\u52d5\u6642\u3002<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109394\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109394\"><\/iframe><\/div>\n<\/figure>\n<p>\u7559\u5728\u300c\u4e92\u52d5\u300d\u9762\u677f\u4e2d\uff0c\u5728\u6211\u5011\u7684\u6700\u7d42\u6b65\u9a5f\u4e2d\u914d\u7f6e\u52d5\u756b\u3002<\/p>\n<h2>3.\u8a2d\u5b9a\u52d5\u756b<\/h2>\n<p>\u8b93\u6211\u5011\u900f\u904e\u5f15\u5165\u52d5\u756b\u4f86\u5be6\u73fe\u9019\u4e00\u9ede\u3002\u5728\u4e0b\u9762 <strong>\u6efe\u52d5\u6642<\/strong>\uff0c \u6311\u9078 <strong>\u64ad\u653e\u6efe\u52d5\u52d5\u756b<\/strong> \u5f9e\u201c\u64cd\u4f5c\u201d\u529f\u80fd\u8868\u3002\u5728\u6efe\u52d5\u52d5\u756b\u65c1\u908a\uff0c\u9ede\u64ca\u52a0\u865f\u4e26\u5f9e\u4e0b\u62c9\u5f0f\u9078\u55ae\u4e2d\u9078\u64c7 Lottie \u4ee5\u5305\u542b\u6211\u5011\u7684\u521d\u59cb\u64cd\u4f5c\u3002\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109342\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109342\"><\/iframe><\/div>\n<\/figure>\n<p>\u5728\u6efe\u52d5\u52d5\u4f5c\u6642\u9593\u8ef8\u548c\u4e0b\u65b9\u7684 Lottie \u4e0b\u9078\u64c7 100% \u8655\u7684\u52d5\u756b\uff0c\u5c07\u5176\u8abf\u6574\u70ba 100%\u3002\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-fullwidth\" data-rt-type=\"video\" data-rt-align=\"fullwidth\" data-rt-max-width=\"\" data-rt-max-height=\"50.23474178403755%\" data-rt-dimensions=\"426:214\" data-page-url=\"https:\/\/vimeo.com\/411109293\">\n<div><iframe allowfullscreen frameborder scrolling=\"no\" src=\"https:\/\/player.vimeo.com\/video\/411109293\"><\/iframe><\/div>\n<\/figure>\n<p>\u73fe\u5728\uff0c\u52d5\u756b\u5c07\u5f9e 0% \u958b\u59cb\uff0c\u4e26\u5728\u6efe\u52d5\u5230\u8996\u5716\u4e4b\u5916\u6642\u9054\u5230 100%\u3002\u00a0<\/p>\n<p>\u60a8\u53ef\u4ee5\u555f\u7528\u5373\u6642\u9810\u89bd\u6a21\u5f0f\u6216\u5728\u9810\u89bd\u4e2d\u8a55\u4f30\u60a8\u7684\u5de5\u4f5c\uff0c\u4ee5\u4fbf\u5728\u6efe\u52d5\u6642\u89c0\u5bdf\u52d5\u756b\u9032\u5ea6\u3002\u00a0<\/p>\n<pThat's all \u2014 you have successfully crafted a scroll-based Lottie animation in the Webflow designer. Kudos!\n<\/div>","protected":false},"excerpt":{"rendered":"\u4f5c\u70ba Webflow \u4e2d\u7684 After Effects \u548c Lottie \u7cfb\u5217\u7684\u4e00\u90e8\u5206\uff0c\u6211\u5011\u88fd\u4f5c\u4e86 Lottie \u52d5\u756b\u2026","protected":false},"author":2,"featured_media":5698,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[301],"tags":[],"class_list":{"0":"post-5697","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-interactions-animations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/5697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/comments?post=5697"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/5697\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media\/5698"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media?parent=5697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/categories?post=5697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/tags?post=5697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}