{"id":5917,"date":"2024-04-14T20:08:47","date_gmt":"2024-04-14T12:08:47","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5917"},"modified":"2024-04-14T20:08:47","modified_gmt":"2024-04-14T12:08:47","slug":"create-an-animated-after-effects-composition-to-trigger-on-click","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/zh\/create-an-animated-after-effects-composition-to-trigger-on-click\/","title":{"rendered":"\u5efa\u7acb\u52d5\u756b After Effects \u5408\u6210\u4ee5\u5728\u9ede\u64ca\u6642\u89f8\u767c"},"content":{"rendered":"<div class=\"docs_rich-text w-richtext\">\n<p><\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3sq0hul4grdaywnb1uwqhdphksg4kezaxmyyfppugmdta055ixbib8umrx0d2lvrsrk8cmnni9sa0lfult2sxas0d_4hnrvsl2duzgfcupiie.gif\" title=\"64b94842df9545eb1350bf0c_5e39fc36cf358e63cda4ee42__ghi4djlw8iyly-7r6le_gasnza3 sq0hul4grdaywnbnbx _4hnrvsl2duzgfcupiie\"><\/div>\n<\/figure>\n<p>\u5728\u6211\u5011\u6db5\u84cb Webflow \u5167\u7684 After Effects \u548c Lottie \u7684\u6559\u80b2\u8ab2\u7a0b\u4e2d\uff0c\u88fd\u4f5c\u4e86\u4e00\u500b\u8ff7\u4eba\u7684\u52d5\u756b\uff0c\u5c55\u793a\u4e86\u4e00\u500b\u5713\u5708\u64f4\u5c55\u5230\u591a\u500b\u8f03\u5c0f\u7684\u5713\u5708\u3002\u672c\u6559\u5b78\u5c07\u6307\u5c0e\u60a8\u914d\u7f6e\u52d5\u756b\u4ee5\u5728\u55ae\u64ca\u6216\u9ede\u64ca\u6ed1\u9f20\u6642\u555f\u52d5\u3002<\/p>\n<p>\u6211\u5011\u5c07\u5206\u4e09\u500b\u4e3b\u8981\u968e\u6bb5\u5b8c\u6210\u8a72\u7a0b\u5e8f\uff1a<\/p>\n<ol>\n<li>\u63d2\u5165\u6d1b\u8482\u52d5\u756b\u00a0<\/li>\n<li>\u5efa\u7acb\u89f8\u767c\u5668\u00a0<\/li>\n<li>\u6e96\u5099\u52d5\u756b<\/li>\n<\/ol>\n<p>\u8981\u7a4d\u6975\u53c3\u8207\uff0c\u8acb\u96a8\u610f <a href=\"https:\/\/webflow.com\/website\/After-Effects-and-Lottie-or-Click-based-animation\">\u8907\u88fd\u6b64\u9805\u76ee<\/a>.<\/p>\n<pUnderstand? Excellent! Let's commence.<\/p>\n<h2>\u63d2\u5165 Lottie \u52d5\u756b<\/h2>\n<pIt is necessary to export the Lottie animation from After Effects and import it into your Webflow project. Learn the process in steps 3 and 4 of our comprehensive instructional guide.\u00a0\n<pInitiate by opening a blank page in the Webflow Designer and adjusting the background color to black at the lower section of the Style panel situated on the right.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvnipv30i4qemkrn6m1jonsz8vrc1kupdmyaug2yjno_y2zmpukp6s1xajuiubitz8gmdojeud7cp05uq0fkletenl2gg_fuglv4asakuqbsinfnq-tk.gif\" title=\"64b94842df9545eb1350bf00_5e39fc34e2d596b302676370_ympbgf0i5wpojtywr-mdwvni pv30i4qemkrn6m1jonsz8vrc1kgm 2gg_fuglv4asakuqbsinfnq-tk\"><\/div>\n<\/figure>\n<p><\/p>\n<pFor locating and incorporating the expanding Lottie animation, select the picture icon (Assets panel) from the left toolbar and drop the circular animation onto the Canvas.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoaldziz_qc4dia1iylgofkyyrthi5nq128vyh-tv1f61oaianzlgsoopirl3l7mtsui7iv54cnijuvseeyaf5o2ojyjfqnaromo2yempxrxpqh0dr.gif\" title=\"64b94842df9545eb1350bf2c_5e39fc34ec2a1e05471067df_ifrdvd7xhv4hst78w2r92hqoald ziz_qc4dia1iylgofkyyrthi5nq2r92hqoald ziz_qc4dia1iylgofkyyrthi5nq128h-175675365 \u6708yjfqnaromo2yempxrxpqh0dr\"><\/div>\n<\/figure>\n<p><\/p>\n<pTo center the circular animation, confirm that the body element is chosen in the Assets panel on the left. Under the Layout segment within the Style panel on the right, set Align and Justify to center.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zy-3yq_a7jyqb-dj1x0r4wnnhuy-vmeb73pmvnxfpwkwmib8bbltxyt7smoxaem9r1hpaqgx4wj9.gif\" title=\"64b94842df9545eb1350bf12_5e39fc39ec2a1ef9cf1067e6_lgobcgcjapvsgswg06trerf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-zyrf4nawnnpm8jrrodnm5_hkkz_kmnie6fq4rvfu-x-3 ltxyt7smoxaem9r1hpaqgx4wj9\"><\/div>\n<\/figure>\n<p><\/p>\n<pUpon previewing the page (click on the eye in the top left corner), the animation will play immediately once loaded. This doesn't align with our intention, so we will address this in the subsequent step.\u00a0<\/p>\n<h2>\u914d\u7f6e\u89f8\u767c\u5668<\/h2>\n<pWithin this phase, the objective is to set the animation to activate upon a click instead of commencing automatically when the page loads.\u00a0\u00a0\n<pAhead of inserting the trigger, ensure that the animation is chosen, not another element such as the body.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9heu53qv2jbk6ff9hr9ns4vkgavp7sefn66fcnnyg2pntwbbeyyc4hjvcobg8hrzsvyhulduboo-tnw9oke4reqwtdplcjor-kca7x5s6fyiq-1f0x.png\" title=\"64b94842df9545eb1350bf03_5e39fc35774af9a0968263ea_phkdl9_1xpgvb2ni5_ofxo9he u53qv2jbk6ff9hr9ns4vkgavp7 dplcjor-kca7x5s6fyiq-1f0x\"><\/div>\n<\/figure>\n<p><\/p>\n<pWithin the Interactions panel on the right toolbar, access the Element trigger menu and opt for Mouse click (tap).\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00vrtmehrsbcmttj6njuvpa2q9ffl-vfok3goldlpobcwyjbgpcuwhmwlefqqh_iotjhkblrqhh2br41u.gif\" title=\"64b94842df9545eb1350bf17_5e39fc3b29557cad61dad6d5_yfccdoutgynj5na88hs_xa6cl-g-zt9pzi9j-p5-vkerb_hny5wia6t00fehrffia6t efqqh_iotjhkblrqhh2br41u\"><\/div>\n<\/figure>\n<h2>\u914d\u7f6e\u52d5\u756b<\/h2>\n<pWithin the Interactions panel, under On 1st click, opt for Lottie Playback from the Action menu.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzokixd58t9vq_t6t2ntbjeqwh4dqyk9dc51zodwia9mfu_lbvvtiylyqyjslnilemmgtok7zpbrmthwl2byjgagkdlofocgdfjatw8guqbegyandax.gif\" title=\"64b94842df9545eb1350bf06_5e39fc3899e7255693d471fa_t4kcw4dqqzgvl1s6e8-rhrzdcixd58t9vq_t6t2ntbjeqh4dmzoyiigft 2byjgagkdlofocgdfjatw8guqbegyandax\"><\/div>\n<\/figure>\n<p><\/p>\n<pAnd there you have it \u2014 mission accomplished! Your Lottie animation will now activate upon a click. Feel free to test it out in the preview mode. Upon loading the page, the animation will remain stationary until activated by a mouse click or tap.\u00a0<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50yyd5hpx6pshplkoh79atfsdt88tkhgiaoviypnyavyv0v9z3akjjbmlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1.gif\" title=\"64b94842df9545eb1350bf09_5e39fc3a774af9e8258263fd_xk3_cvwddvxc1d0q0b26pqzpfnxpx3qwr3oov6o-lvdjj0r50 mlqkf_xebnybhruzd9jxqkmfhbnaxkt4j1\"><\/div>\n<\/figure>\n<p><\/p>\n<pImpressive work!\n<\/div>","protected":false},"excerpt":{"rendered":"\u8a2d\u5b9a\u52d5\u756b\u4ee5\u900f\u904e\u6ed1\u9f20\u9ede\u64ca\u6216\u9ede\u64ca\u4f86\u8f09\u5165\u3002","protected":false},"author":2,"featured_media":5918,"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":[290],"tags":[],"class_list":{"0":"post-5917","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/5917","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=5917"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/posts\/5917\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media\/5918"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/media?parent=5917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/categories?post=5917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/zh\/wp-json\/wp\/v2\/tags?post=5917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}