https://openclipart.org/detail/353823/b ... -colorized
準備做這個自踢屁屁的動畫，獻給馬拉錘
準備做這個自踢屁屁的動畫，獻給馬拉錘
https://openclipart.org/detail/353823/b ... -colorized
上次由 ejsoon 在 2025年 12月 8日 19:08，总共编辑 1 次。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://inkscape.org/learn/animation/
我還用這個做了一個動畫（也是獻給馬拉錘的）：
代码： 全选
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="360" height="240" viewBox="0 0 360 240"><g><path d="m226 30.4c-8.86 0-16 7.14-16 16v74c0 6.59 3.95 12.2 9.62 14.7l-2.69 17.7 41.8-16.3h62.3c8.86 0 16-7.14 16-16v-74c0-8.86-7.14-16-16-16h-95z" fill="#257179"></path><g transform="matrix(.631 0 0 .758 121 19)" fill="#f4be40" aria-label="n"><path d="m330 59.9v13.2h-3.59v-13.1q0-3.11-1.21-4.65-1.21-1.54-3.63-1.54-2.91 0-4.59 1.86-1.68 1.86-1.68 5.06v12.4h-3.61v-21.9h3.61v3.4q1.29-1.97 3.03-2.95 1.76-.977 4.04-.977 3.77 0 5.7 2.34 1.93 2.32 1.93 6.86z"></path></g><text x="217.89473" y="97.443619" fill="#f4be40" font-family="sans-serif" font-size="40px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><tspan x="217.89473" y="97.443619">1-0.1</tspan></text><set id="set7" attributeName="opacity" to="1" begin="0;set8.end" dur="1s"></set><set id="set8" attributeName="opacity" to="0" begin="set7.end" dur="1s"></set></g><g><ellipse cx="124" cy="77" rx="26.5" ry="38" fill="#d27100" stroke-width="3.1"><animateMotion rotate="0" accumulate="none" additive="sum" begin="0s" calcMode="spline" dur="1s" keyPoints="0;0.73;0" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.25;1" path="M 0.15953826904296875 2.1053848266601562 L -6.911529541015625 -12.036750793457031" repeatCount="indefinite"></animateMotion><animateTransform accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="1s" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.5;1" repeatCount="indefinite" type="rotate" values="0 122.95243072509766 84.05513000488281;22 122.95243072509766 84.05513000488281;0 122.95243072509766 84.05513000488281"></animateTransform><animateMotion rotate="0" accumulate="none" additive="sum" begin="0s" calcMode="spline" dur="1s" keyPoints="0;1;0" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.5;1" path="M 0 0 L 9.3519287109375 -0.7230453491210938" repeatCount="indefinite"></animateMotion></ellipse><rect x="111" y="78" width="26" height="84" fill="#d27100"></rect><path d="m52.5 83a7.5 9.5 0 0 0-7.5 9.5 7.5 9.5 0 0 0 7.45 9.5l25.5 37 42-5-1-8-33 4-27.1-32.5a7.5 9.5 0 0 0 1.12-4.96 7.5 9.5 0 0 0-7.5-9.5z" fill="#d27100" stroke-width="1px"><animateTransform fill="freeze" accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="1s" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.5;1" repeatCount="indefinite" type="rotate" values="0 113.76004028320312 130.72418212890625;29 113.76004028320312 130.72418212890625;0 113.76004028320312 130.72418212890625"></animateTransform></path><path d="m184 75a7.5 9.5 0 0 1 7.5 9.5 7.5 9.5 0 0 1-7.45 9.5l-25.5 37-42-5 1-8 33 4 27.1-32.5a7.5 9.5 0 0 1-1.12-4.96 7.5 9.5 0 0 1 7.5-9.5z" fill="#d27100" stroke-width="1px"><animateTransform accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="10s" keySplines="0 0 1 1" keyTimes="0;1" repeatCount="0" type="rotate" values="0 116 75;0 116 75"></animateTransform><animateTransform accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="1s" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.5;1" repeatCount="indefinite" type="rotate" values="0 130.73060607910156 125.77442932128906;20.562383291571848 130.73060607910156 125.77442932128906;0 130.73060607910156 125.77442932128906"></animateTransform></path><path d="m49 222 26-5-5-6 11-28 39-22-3-13-46 20-11 40-25 8z" fill="#d27100" stroke-width="1px"><animateTransform fill="freeze" accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="1s" keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1" keyTimes="0;0.25;0.5;0.75;1" repeatCount="indefinite" type="rotate" values="21.86181869056429 118.70978546142578 156.8871307373047;0 118.70978546142578 156.8871307373047;21.86181869056429 118.70978546142578 156.8871307373047;0 118.70978546142578 156.8871307373047;21.86181869056429 118.70978546142578 156.8871307373047"></animateTransform></path><path d="m197 222-26-5 5-6-11-28-39-22 3-13 46 20 11 40 25 8z" fill="#d27100" stroke-width="1px"><animateTransform fill="freeze" accumulate="none" additive="sum" attributeName="transform" attributeType="auto" begin="0s" calcMode="spline" dur="1s" keySplines="0 0 1 1;0 0 1 1" keyTimes="0;0.5;1" repeatCount="indefinite" type="rotate" values="0 128.60928344726562 164.66529846191406;-27 128.60928344726562 164.66529846191406;0 128.60928344726562 164.66529846191406"></animateTransform></path><animateMotion rotate="0" path="M 0.85953826904296875 2.1053848266601562 L -6.911529541015625 -12.036750793457031" keyPoints="0;0.73;0" calcMode="spline" keyTimes="0;0.25;1" keySplines="0 0 1 1;0 0 1 1" dur="1s" begin="0s" repeatCount="indefinite" additive="sum" accumulate="none" fill="freeze" id="animateMotion8054"></animateMotion></g></svg>
現在這個網頁程式找不到了！！！緊急事件！！！
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://srufaculty.sru.edu/david.dailey ... ketful.htm
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://code.google.com/archive/p/jessyink/wikis
http://tavmjong.free.fr/INKSCAPE/MANUAL ... syInk.html
https://xia.funraiders.org/
JessyInk
JessyInk is an Inkscape extension, which as of version 0.91, comes installed with Inkscape. It creates a slideshow type of animation for presentations, to be viewed in web browsers, by means of embedding JavaScript in the SVG file. Their wiki contains tutorials and other documentation, and there is some info in the Inkscape manual, as well.
XIA
XIA can be installed either as an extension or a standalone program. It creates HTML5 interactive images, which consist of interactive webpages (such as for presentations), that can even contain simple games. Interactivity includes mouse click, hover, and drag and drop. On their website can be found documentation in the form of a PDF file, an instructional video, and several example files, showing each use case which XIA can create.
上次由 ejsoon 在 2025年 12月 8日 19:20，总共编辑 1 次。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://github.com/senshu/Sozi/releases
youtube.com/watch?v=Vdn4Y9FC6qE
Sozi
Sozi is a presentation application which produces translations, zooms and rotations to be viewed in web browsers, by means of embedding JavaScript in the SVG file. It's editor started its life as an Inkscape extension (legacy). There is more feature rich standalone software. Download it here.
Video Tutorials series - How to use Sozi
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://tupitube.com/index.php?r=custom_pages/view&id=6
https://www.maefloresta.com/wiki/doku.php
Tupi
Tupi is a free/open source program which can animate both raster and vector images. Their Documentation page provides links to their manual, tutorials, examples, faq, and more.
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://imvenx.github.io/inkaweb/
Friction
friction.graphics is a powerful and versatile motion graphics application that allows you to create stunning vector and raster animations for web and video platforms with ease. You can import your SVG files from Inkscape and animate them.
Inka
Is a free and open source program that leverages Inkscape's SVG editing capabilities to create animations. It uses CSS animations under the hood.
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
https://srufaculty.sru.edu/david.dailey/svg/
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
layer4 >
g7918：左臺底
g7832：左臺柱
g3152：右臺影
g4622：腳影
path3779：繩
g3771：右輪
g2904：右臺
g2902：左輪
g4365：前腳
g6762：大腿
path7366：後手臂
g7627：後手
g7346：前手
g7712：頭
g7730：身
g7066：前手臂
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
代码： 全选
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Friction - https://friction.graphics -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 540" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(907.339 500.254)">
<g transform="translate(-51.3221 -6.0267)">
<g transform="rotate(0)">
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-907.339 -500.254)">
<g id="flexo">
<g transform="translate(601.407 1084.55)">
<g transform="translate(305.765 -584.293)">
<g transform="rotate(0)">
<g transform="scale(0.45476 0.45476)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-601.407 -1084.55)">
<path fill-rule="evenodd" stroke-linejoin="round" id="foot" d="M601.406 814.16C558.6 814.16 518.257 847.087 516.674 916.693C516.403 928.595 494.324 969.757 426.869 972.061C320.268 975.7 292.698 1016.44 276.725 1048.03C264.097 1073.01 275.166 1084.55 293.062 1084.55L909.75 1084.55C927.647 1084.55 938.718 1073.01 926.09 1048.03C910.116 1016.44 882.545 975.7 775.943 972.061C708.489 969.757 686.078 928.598 686.141 916.693C686.478 852.927 644.212 814.16 601.406 814.16ZM601.406 854.869C621.829 854.869 638.385 871.425 638.385 891.848C638.385 912.27 621.829 928.826 601.406 928.826C580.984 928.826 564.428 912.27 564.428 891.848C564.428 871.425 580.984 854.869 601.406 854.869Z" stroke-linecap="round" fill="rgba(255, 161, 8, 1)" stroke-width="0" stroke="none"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(906.826 412.279)">
<g transform="translate(0 0)">
<g>
<animateTransform attributeName="transform" repeatCount="indefinite" calcMode="spline" values="-49.5279;-49.5279;-7.65126;45.9271;18.2251;17.5083;18.2251;18.4041;18.2251;-49.5279;-49.5279" keySplines="0 0 1 1;0.333333 0 0.443862 0.855573;0.238345 0.112883 0.56007 1;0.28514 0 0.800819 0.941779;0.275735 0.75 0.632551 1;0.415505 9.91254e-15 0.855056 1;0.0834376 0 0.582812 1;0.415628 0 0.790316 0.25;0.360357 0.00595113 0.857143 1;0 0 1 1" type="rotate" dur="9s" keyTimes="0;0;0.0555556;0.185185;0.385185;0.433343;0.518519;0.666482;0.740741;0.87037;1"/>
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-906.826 -412.279)">
<g id="Group0">
<g transform="translate(601.407 894.289)">
<g transform="translate(305.765 -480.556)">
<g transform="rotate(0)">
<g transform="scale(0.45476 0.45476)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-601.407 -894.289)">
<path fill-rule="evenodd" stroke-linejoin="round" id="arm1" d="M601.406 532.795C545.502 532.795 499.646 578.65 499.646 634.555L499.646 893.029C499.646 948.934 545.502 994.789 601.406 994.789C657.311 994.789 703.168 948.934 703.168 893.029L703.168 634.555C703.168 578.65 657.311 532.795 601.406 532.795ZM601.074 578.74Q601.982 578.74 602.889 578.785Q603.795 578.829 604.699 578.918Q605.602 579.007 606.5 579.141Q607.398 579.274 608.288 579.451Q609.179 579.628 610.059 579.848Q610.94 580.069 611.808 580.333Q612.677 580.596 613.532 580.902Q614.387 581.208 615.225 581.555Q616.064 581.902 616.885 582.291Q617.705 582.679 618.506 583.107Q619.306 583.535 620.085 584.001Q620.864 584.468 621.618 584.972Q622.373 585.477 623.102 586.017Q623.831 586.558 624.533 587.134Q625.235 587.71 625.908 588.32Q626.58 588.929 627.222 589.571Q627.864 590.213 628.474 590.885Q629.083 591.558 629.659 592.26Q630.235 592.962 630.776 593.691Q631.316 594.42 631.821 595.175Q632.325 595.929 632.792 596.708Q633.258 597.487 633.686 598.287Q634.114 599.088 634.502 599.908Q634.891 600.729 635.238 601.568Q635.585 602.406 635.891 603.261Q636.197 604.116 636.461 604.984Q636.724 605.853 636.945 606.734Q637.165 607.614 637.342 608.505Q637.519 609.395 637.653 610.293Q637.786 611.191 637.875 612.094Q637.964 612.998 638.008 613.904Q638.053 614.811 638.053 615.719Q638.053 616.626 638.008 617.533Q637.964 618.44 637.875 619.343Q637.786 620.247 637.652 621.145Q637.519 622.043 637.342 622.933Q637.165 623.823 636.945 624.704Q636.724 625.584 636.46 626.453Q636.197 627.322 635.891 628.176Q635.585 629.031 635.238 629.87Q634.89 630.708 634.502 631.529Q634.114 632.35 633.686 633.15Q633.258 633.951 632.792 634.73Q632.325 635.508 631.821 636.263Q631.316 637.018 630.776 637.747Q630.235 638.476 629.659 639.178Q629.083 639.88 628.473 640.552Q627.864 641.225 627.222 641.867Q626.58 642.508 625.907 643.118Q625.235 643.728 624.533 644.304Q623.831 644.879 623.102 645.42Q622.373 645.961 621.618 646.465Q620.864 646.97 620.085 647.436Q619.306 647.903 618.506 648.331Q617.705 648.759 616.884 649.147Q616.064 649.535 615.225 649.882Q614.386 650.23 613.532 650.536Q612.677 650.842 611.808 651.105Q610.94 651.369 610.059 651.589Q609.179 651.81 608.288 651.987Q607.398 652.164 606.5 652.297Q605.602 652.43 604.699 652.519Q603.795 652.608 602.889 652.653Q601.982 652.697 601.074 652.697Q600.166 652.697 599.26 652.653Q598.353 652.608 597.45 652.519Q596.546 652.43 595.648 652.297Q594.75 652.164 593.86 651.987Q592.97 651.81 592.089 651.589Q591.209 651.369 590.34 651.105Q589.471 650.841 588.617 650.536Q587.762 650.23 586.923 649.882Q586.085 649.535 585.264 649.147Q584.443 648.759 583.643 648.331Q582.842 647.903 582.064 647.436Q581.285 646.97 580.53 646.465Q579.775 645.961 579.046 645.42Q578.317 644.879 577.615 644.304Q576.914 643.728 576.241 643.118Q575.568 642.508 574.927 641.866Q574.285 641.225 573.675 640.552Q573.065 639.879 572.49 639.178Q571.914 638.476 571.373 637.747Q570.832 637.018 570.328 636.263Q569.823 635.508 569.357 634.729Q568.89 633.951 568.462 633.15Q568.034 632.35 567.646 631.529Q567.258 630.708 566.911 629.87Q566.563 629.031 566.257 628.176Q565.952 627.322 565.688 626.453Q565.424 625.584 565.204 624.704Q564.983 623.823 564.806 622.933Q564.629 622.043 564.496 621.145Q564.363 620.247 564.274 619.343Q564.185 618.44 564.14 617.533Q564.096 616.626 564.096 615.719Q564.096 614.811 564.14 613.904Q564.185 612.998 564.274 612.094Q564.363 611.191 564.496 610.293Q564.629 609.395 564.806 608.505Q564.983 607.614 565.204 606.734Q565.424 605.853 565.688 604.984Q565.952 604.116 566.257 603.261Q566.563 602.406 566.911 601.568Q567.258 600.729 567.646 599.908Q568.034 599.088 568.462 598.287Q568.89 597.487 569.357 596.708Q569.823 595.929 570.328 595.175Q570.832 594.42 571.373 593.691Q571.914 592.962 572.49 592.26Q573.065 591.558 573.675 590.885Q574.285 590.213 574.927 589.571Q575.568 588.929 576.241 588.32Q576.914 587.71 577.615 587.134Q578.317 586.558 579.046 586.017Q579.775 585.477 580.53 584.972Q581.285 584.468 582.064 584.001Q582.842 583.535 583.643 583.107Q584.443 582.679 585.264 582.291Q586.085 581.902 586.923 581.555Q587.762 581.208 588.617 580.902Q589.471 580.596 590.34 580.333Q591.209 580.069 592.089 579.848Q592.97 579.628 593.86 579.451Q594.75 579.274 595.648 579.14Q596.546 579.007 597.45 578.918Q598.353 578.829 599.26 578.785Q600.166 578.74 601.074 578.74ZM601.406 706.062C630.289 706.062 653.168 728.94 653.168 757.822L653.168 893.029C653.168 921.912 630.289 944.789 601.406 944.789C572.524 944.789 549.646 921.912 549.646 893.029L549.646 757.822C549.646 728.94 572.524 706.062 601.406 706.062Z" stroke-linecap="round" fill="rgba(52, 101, 164, 1)" stroke-width="0" stroke="none"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(907.046 286.407)">
<g transform="translate(0 0)">
<g>
<animateTransform attributeName="transform" repeatCount="indefinite" calcMode="spline" values="103.755;103.755;14.9554;13.4701;23.1123;9.41679;8.87956;9.41679;9.23778;9.41679;103.755;103.755" keySplines="0 0 1 1;0.333333 0 0.493374 0.93189;0.296271 0.708095 0.631569 1;0.255479 0 0.618879 1;0.261071 0 0.866147 0.911678;0.210705 0.75 0.582168 1;0.388986 9.91254e-15 0.864307 1;0.0834376 0 0.582812 1;0.415628 0 0.790316 0.25;0.360357 0.00427407 0.857143 1;0 0 1 1" type="rotate" dur="9s" keyTimes="0;0;0.0555556;0.0722301;0.185185;0.385185;0.427536;0.518519;0.666482;0.740741;0.87037;1"/>
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-907.046 -286.407)">
<g id="Group">
<g transform="translate(601.407 616.831)">
<g transform="translate(305.765 -329.275)">
<g transform="rotate(0)">
<g transform="scale(0.45476 0.45476)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-601.407 -616.831)">
<path fill-rule="evenodd" stroke-linejoin="round" id="arm2" d="M601.406 256.629C545.502 256.629 499.646 302.484 499.646 358.388L499.646 616.863C499.646 672.768 545.502 718.623 601.406 718.623C657.311 718.623 703.168 672.768 703.168 616.863L703.168 358.388C703.168 302.484 657.311 256.629 601.406 256.629ZM601.074 302.574Q601.982 302.574 602.889 302.619Q603.795 302.663 604.699 302.752Q605.602 302.841 606.5 302.974Q607.398 303.108 608.288 303.285Q609.179 303.462 610.059 303.682Q610.94 303.903 611.808 304.166Q612.677 304.43 613.532 304.736Q614.387 305.042 615.225 305.389Q616.064 305.736 616.885 306.124Q617.705 306.513 618.506 306.94Q619.306 307.368 620.085 307.835Q620.864 308.302 621.618 308.806Q622.373 309.31 623.102 309.851Q623.831 310.392 624.533 310.968Q625.235 311.544 625.908 312.153Q626.58 312.763 627.222 313.405Q627.864 314.047 628.474 314.719Q629.083 315.392 629.659 316.094Q630.235 316.795 630.776 317.525Q631.316 318.254 631.821 319.008Q632.325 319.763 632.792 320.542Q633.258 321.321 633.686 322.121Q634.114 322.922 634.502 323.742Q634.891 324.563 635.238 325.402Q635.585 326.24 635.891 327.095Q636.197 327.95 636.461 328.818Q636.724 329.687 636.945 330.568Q637.165 331.448 637.342 332.338Q637.519 333.229 637.653 334.127Q637.786 335.025 637.875 335.928Q637.964 336.831 638.008 337.738Q638.053 338.645 638.053 339.553Q638.053 340.46 638.008 341.367Q637.964 342.274 637.875 343.177Q637.786 344.08 637.652 344.978Q637.519 345.876 637.342 346.767Q637.165 347.657 636.944 348.538Q636.724 349.418 636.46 350.287Q636.197 351.155 635.891 352.01Q635.585 352.865 635.238 353.704Q634.89 354.542 634.502 355.363Q634.114 356.183 633.686 356.984Q633.258 357.785 632.792 358.563Q632.325 359.342 631.821 360.097Q631.316 360.851 630.775 361.581Q630.235 362.31 629.659 363.011Q629.083 363.713 628.473 364.386Q627.864 365.058 627.222 365.7Q626.58 366.342 625.907 366.952Q625.235 367.561 624.533 368.137Q623.831 368.713 623.102 369.254Q622.373 369.795 621.618 370.299Q620.863 370.803 620.085 371.27Q619.306 371.737 618.506 372.165Q617.705 372.593 616.884 372.981Q616.064 373.369 615.225 373.716Q614.386 374.064 613.532 374.369Q612.677 374.675 611.808 374.939Q610.94 375.202 610.059 375.423Q609.179 375.643 608.288 375.82Q607.398 375.998 606.5 376.131Q605.602 376.264 604.699 376.353Q603.795 376.442 602.889 376.487Q601.982 376.531 601.074 376.531Q600.166 376.531 599.26 376.487Q598.353 376.442 597.45 376.353Q596.546 376.264 595.648 376.131Q594.75 375.998 593.86 375.82Q592.97 375.643 592.089 375.423Q591.209 375.202 590.34 374.939Q589.471 374.675 588.617 374.369Q587.762 374.064 586.923 373.716Q586.084 373.369 585.264 372.981Q584.443 372.592 583.643 372.165Q582.842 371.737 582.063 371.27Q581.285 370.803 580.53 370.299Q579.775 369.795 579.046 369.254Q578.317 368.713 577.615 368.137Q576.914 367.561 576.241 366.952Q575.568 366.342 574.926 365.7Q574.285 365.058 573.675 364.386Q573.065 363.713 572.489 363.011Q571.914 362.31 571.373 361.581Q570.832 360.851 570.328 360.097Q569.823 359.342 569.357 358.563Q568.89 357.785 568.462 356.984Q568.034 356.183 567.646 355.363Q567.258 354.542 566.911 353.704Q566.563 352.865 566.257 352.01Q565.951 351.155 565.688 350.287Q565.424 349.418 565.204 348.538Q564.983 347.657 564.806 346.767Q564.629 345.876 564.496 344.978Q564.363 344.08 564.274 343.177Q564.185 342.274 564.14 341.367Q564.096 340.46 564.096 339.553Q564.096 338.645 564.14 337.738Q564.185 336.831 564.274 335.928Q564.363 335.025 564.496 334.127Q564.629 333.229 564.806 332.338Q564.983 331.448 565.204 330.567Q565.424 329.687 565.688 328.818Q565.952 327.95 566.257 327.095Q566.563 326.24 566.911 325.401Q567.258 324.563 567.646 323.742Q568.034 322.922 568.462 322.121Q568.89 321.32 569.357 320.542Q569.823 319.763 570.328 319.008Q570.832 318.254 571.373 317.524Q571.914 316.795 572.49 316.094Q573.065 315.392 573.675 314.719Q574.285 314.047 574.927 313.405Q575.568 312.763 576.241 312.153Q576.914 311.544 577.615 310.968Q578.317 310.392 579.046 309.851Q579.775 309.31 580.53 308.806Q581.285 308.302 582.064 307.835Q582.842 307.368 583.643 306.94Q584.443 306.513 585.264 306.124Q586.085 305.736 586.923 305.389Q587.762 305.042 588.617 304.736Q589.471 304.43 590.34 304.166Q591.209 303.903 592.089 303.682Q592.97 303.462 593.86 303.285Q594.75 303.107 595.648 302.974Q596.546 302.841 597.45 302.752Q598.353 302.663 599.26 302.619Q600.166 302.574 601.074 302.574ZM601.406 429.896C630.289 429.896 653.168 452.773 653.168 481.656L653.168 616.863C653.168 645.746 630.289 668.623 601.406 668.623C572.524 668.623 549.646 645.746 549.646 616.863L549.646 481.656C549.646 452.773 572.524 429.896 601.406 429.896Z" stroke-linecap="round" fill="rgba(255, 161, 8, 1)" stroke-width="0" stroke="none"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(903.186 160.466)">
<g transform="translate(0 0)">
<g>
<animateTransform attributeName="transform" repeatCount="indefinite" calcMode="spline" values="0;0;-34.1131;-81.4652;1.02227;1.07929;-35.3493;-35.7606;-35.3493;-0.103709;0;0" keySplines="0 0 1 1;0.580894 0.0104452 0.39435 0.676199;0.259564 0.23327 0.416839 1;0.378024 0 0.646414 1;0.333161 0 0.666494 0.332856;0.530859 0.00978126 0.690913 0.990219;0.180224 0.5 0.609366 1;0.41855 1.72696e-14 0.806896 0.267949;0.317513 0.0200562 0.749507 1;0.334571 0 0.667908 0.332217;0 0 1 1" type="rotate" dur="9s" keyTimes="0;0;0.0555556;0.185185;0.38473;0.385185;0.518519;0.65054;0.740741;0.869878;0.87037;1"/>
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-903.186 -160.466)">
<g id="Group1">
<g transform="translate(0 0)">
<g transform="translate(1114.44 194.794)">
<g transform="rotate(-30.9984)">
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g transform="translate(0 0)">
<path stroke-linejoin="round" id="lightbeam" d="M0 0C0 0 163.784 173.259 163.784 173.259C163.784 173.259 -139.419 207.099 -139.419 207.099C-139.419 207.099 -174.613 78.508 -174.613 78.508C-174.613 78.508 0 0 0 0Z" stroke-linecap="round" fill="url(#0x00007f995af5ad80)" stroke-width="0" stroke="none"/>
<animate attributeName="opacity" repeatCount="indefinite" calcMode="spline" values="0;0;1;1;0;1;0;1;1;0;0" keySplines="0 0 1 1;0 0 1 1;0 0.333333 1 0.666667;0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1;0 0.333333 1 0.666667;0 0 1 1;0 0 1 1" dur="9s" keyTimes="0;0;0.0555556;0.555556;0.566667;0.574074;0.581481;0.588889;0.740741;0.851852;1"/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(598.947 343.913)">
<g transform="translate(307.107 -180.469)">
<g transform="rotate(35.8374)">
<g transform="scale(0.45476 0.45476)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-598.947 -343.913)">
<path fill-rule="evenodd" stroke-linejoin="round" id="head0" d="M997.961 79.1309C941.903 82.5849 878.097 72.8504 741.623 194.295C719.463 214.015 664.56 245.261 648.809 249.594C630.591 254.604 601.767 263.248 601.406 293.652C601.404 293.866 601.407 294.066 601.404 294.279Q600.177 294.279 598.951 294.34Q597.725 294.4 596.504 294.52Q595.282 294.641 594.068 294.821Q592.854 295.001 591.65 295.24Q590.446 295.48 589.256 295.778Q588.065 296.076 586.89 296.433Q585.716 296.789 584.56 297.203Q583.405 297.616 582.271 298.086Q581.137 298.556 580.027 299.08Q578.918 299.605 577.835 300.184Q576.753 300.762 575.7 301.393Q574.647 302.024 573.627 302.706Q572.606 303.388 571.62 304.12Q570.635 304.851 569.686 305.629Q568.737 306.408 567.828 307.232Q566.918 308.057 566.05 308.925Q565.182 309.793 564.358 310.702Q563.534 311.611 562.755 312.56Q561.977 313.509 561.245 314.495Q560.514 315.481 559.832 316.501Q559.15 317.522 558.519 318.575Q557.888 319.628 557.31 320.71Q556.731 321.792 556.207 322.902Q555.682 324.012 555.212 325.146Q554.742 326.28 554.329 327.435Q553.915 328.591 553.559 329.765Q553.203 330.94 552.905 332.131Q552.606 333.321 552.367 334.525Q552.127 335.729 551.947 336.943Q551.767 338.157 551.647 339.379Q551.527 340.6 551.466 341.826Q551.406 343.052 551.406 344.279Q551.406 345.507 551.466 346.733Q551.527 347.959 551.647 349.18Q551.767 350.402 551.947 351.616Q552.128 352.83 552.367 354.034Q552.606 355.238 552.905 356.428Q553.203 357.619 553.559 358.794Q553.916 359.968 554.329 361.124Q554.743 362.279 555.212 363.413Q555.682 364.547 556.207 365.657Q556.732 366.767 557.31 367.849Q557.889 368.932 558.52 369.984Q559.151 371.037 559.833 372.058Q560.515 373.078 561.246 374.064Q561.977 375.05 562.756 375.999Q563.534 376.948 564.359 377.857Q565.183 378.767 566.051 379.635Q566.919 380.503 567.828 381.327Q568.738 382.151 569.687 382.93Q570.635 383.708 571.621 384.44Q572.607 385.171 573.628 385.853Q574.648 386.535 575.701 387.166Q576.754 387.797 577.836 388.375Q578.919 388.954 580.029 389.479Q581.138 390.004 582.272 390.473Q583.406 390.943 584.562 391.356Q585.717 391.77 586.892 392.126Q588.067 392.483 589.257 392.781Q590.448 393.079 591.652 393.319Q592.856 393.558 594.07 393.738Q595.284 393.918 596.505 394.039Q597.727 394.159 598.953 394.219Q600.179 394.279 601.406 394.279Q601.406 394.279 601.416 394.279C602.669 424.573 630.613 433.228 648.809 438.232C664.56 442.565 719.463 473.811 741.623 493.531C878.097 614.976 941.903 605.241 997.961 608.695C1015.27 609.762 1049.84 600.463 1053.12 573.002C1064.99 473.905 1065.09 214.735 1053.12 114.824C1049.84 87.3628 1015.27 78.0645 997.961 79.1309Z" stroke-linecap="round" fill="url(#0x00007f99568c10c0)" stroke-width="0" stroke="none"/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<defs>
<linearGradient id="0x00007f996cffbc00">
<stop stop-color="rgba(52, 101, 164, 1)" offset="0"/>
<stop stop-color="rgba(20, 38, 62, 1)" offset="1"/>
</linearGradient>
<linearGradient id="0x00007f996cfbb600">
<stop stop-color="rgba(255, 147, 0, 0.4)" offset="0"/>
<stop stop-color="rgba(255, 147, 0, 0)" offset="1"/>
</linearGradient>
<linearGradient x1="-36.1325" x2="-8.53586" id="0x00007f995af5ad80" y2="185.027" gradientUnits="userSpaceOnUse" xlink:href="#0x00007f996cfbb600" y1="5.82869"/>
<linearGradient x1="846.808" x2="912.804" id="0x00007f99568c10c0" y2="677.185" gradientUnits="userSpaceOnUse" xlink:href="#0x00007f996cffbc00" y1="309.152"/>
</defs>
</svg>
正在考慮使用friction
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
或許能在這裡找到，但是我不抱希望。
驚現lazur!
https://alpha.inkscape.org/vectors/www. ... 24&t=35640
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
代码： 全选
<div id="contentInner">
<h1 id="user-interface">User Interface</h1>
<ul id="markdown-toc">
<li><a href="#user-interface" id="markdown-toc-user-interface">User Interface</a> <ul>
<li><a href="#main-toolbar" id="markdown-toc-main-toolbar">Main Toolbar</a></li>
<li><a href="#color-toolbar" id="markdown-toc-color-toolbar">Color Toolbar</a></li>
<li><a href="#viewer" id="markdown-toc-viewer">Viewer</a></li>
<li><a href="#tools" id="markdown-toc-tools">Tools</a></li>
<li><a href="#timeline" id="markdown-toc-timeline">Timeline</a></li>
<li><a href="#properties" id="markdown-toc-properties">Properties</a></li>
<li><a href="#assets" id="markdown-toc-assets">Assets</a></li>
<li><a href="#queue" id="markdown-toc-queue">Queue</a></li>
<li><a href="#fill-and-stroke" id="markdown-toc-fill-and-stroke">Fill and Stroke</a></li>
<li><a href="#preferences" id="markdown-toc-preferences">Preferences</a></li>
<li><a href="#toolbox" id="markdown-toc-toolbox">Toolbox</a></li>
</ul>
</li>
</ul>
<p><img src="/assets/documentation/ui/ui_all.png" alt="Default interface"></p>
<p>Some panels are rearrangable by pressing their left-right-up-down buttons:</p>
<p><img src="/assets/documentation/ui/ui_rearrange-buttons.png" alt="Rearrangement buttons"></p>
<p>The Timeline can be splitted horizontally or vertically to allow better parameter keyframe editing:</p>
<p><img src="/assets/documentation/ui/ui_timeline-splitting-panel.png" alt="Splitting buttons"></p>
<h2 id="main-toolbar">Main Toolbar</h2>
<p><img src="/assets/documentation/ui/ui_panel1.png" alt="Main Toolbar"></p>
<p>The main toolbar provides fast access to the most used commands related to creating/saving projects and importing and exporting assets into the active project.</p>
<p>… expand on the right-click menu …</p>
<h2 id="color-toolbar">Color Toolbar</h2>
<p><img src="/assets/documentation/ui/ui_panel2.png" alt="Color Toolbar"></p>
<p>The color toolbar provides fast access to edit colors, types (none, flat or gradient) and other parameters of selected shapes or the scene background:</p>
<ul>
<li>
<p><strong>Fill</strong>: Allows users to set the interior color, gradient or “no color” of selected shapes. Users can choose between solid colors (flat), linear or radial gradients.</p>
</li>
<li>
<p><strong>Stroke</strong>: Controls the outline of shapes, including its color, width, and style. Users can define other parameters such as width, join and cap styles.</p>
</li>
<li>
<p><strong>Background</strong>: Sets the background color of the canvas or scene. This option ensures consistency in visual presentation across the workspace.</p>
</li>
</ul>
<p>Mouse actions on hover is supported:</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">scroll</code> = change hue</li>
<li><code class="language-plaintext highlighter-rouge">scroll</code> + <code class="language-plaintext highlighter-rouge">shift</code> = change value</li>
<li><code class="language-plaintext highlighter-rouge">scroll</code> + <code class="language-plaintext highlighter-rouge">ctrl/cmd</code> = change saturation</li>
<li><code class="language-plaintext highlighter-rouge">click</code> = open fill/stroke widget</li>
</ul>
<p>… expand on the right-click menu …</p>
<h2 id="viewer">Viewer</h2>
<p><img src="/assets/documentation/ui/ui_panel3.png" alt="Viewer"></p>
<p>The Viewer is the central workspace where users can visualize and interact with their projects, it can also be called <strong>Canvas</strong>. It displays the active composition or animation and allows for real-time previews and adjustments.</p>
<p>The Canvas can be zoomed in and out or fitted in some ways or even reset to default size. Check <code class="language-plaintext highlighter-rouge">Menu > View > Zoom</code> for a full list of options.</p>
<p>On Windows and Linux the mouse wheel can zoom in/out, on macOS add the <code class="language-plaintext highlighter-rouge">option</code> key when using the mouse wheel. Gestures for pan, zoom and smart zoom is supported on macOS.</p>
<ul>
<li><code class="language-plaintext highlighter-rouge">Shift + Ctrl/Cmd</code> + <code class="language-plaintext highlighter-rouge">+</code> = Zoom in (We should change this to not include shift!)</li>
<li><code class="language-plaintext highlighter-rouge">Shift + Ctrl/Cmd</code> + <code class="language-plaintext highlighter-rouge">-</code> = Zoom Out (We should change this to not include shift!)</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl/Cmd</code> + <code class="language-plaintext highlighter-rouge">1</code> = Reset zoom</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl/Cmd</code> + <code class="language-plaintext highlighter-rouge">0</code> = Fit to canvas</li>
<li><code class="language-plaintext highlighter-rouge">Ctrl/Cmd</code> + <code class="language-plaintext highlighter-rouge">9</code> = Fit to canvas width</li>
</ul>
<h2 id="tools">Tools</h2>
<p><img src="/assets/documentation/ui/ui_panel4.png" alt="Tools"></p>
<p>The Toolbar contains a set of tools to create shapes, helpers and some others to edit already created objects.</p>
<ul>
<li>
<p><strong>Object selection mode</strong>: Allows users to select and manipulate entire objects on the canvas. This mode is essential for positioning, scaling, and rotating objects.</p>
</li>
<li>
<p><strong>Point selection mode</strong>: Enables users to select and modify individual points or vertices of an object, offering fine control over shapes and paths.</p>
</li>
<li>
<p><strong>Path</strong>: Creates precise vector paths by placing anchor points and defining curves. Ideal for drawing custom shapes and lines.</p>
</li>
<li>
<p><strong>Hand-drawn Path</strong>: Allows freehand drawing of paths, giving users more flexibility and a natural drawing experience.</p>
</li>
<li>
<p><strong>Circle</strong>: Draws perfect circles or ellipses. Users can define dimensions and position on the canvas.</p>
</li>
<li>
<p><strong>Rectangle</strong>: Creates rectangular or square shapes. Useful for building structured layouts and designs.</p>
</li>
<li>
<p><strong>Text</strong>: Adds text elements to the canvas. Users can adjust font, size, alignment, and other typographical properties.</p>
</li>
<li>
<p><strong>Null object</strong>: Adds an invisible reference object that can be used to group or control other elements in the composition.</p>
</li>
<li>
<p><strong>Color picker</strong>: Enables users to sample and apply colors directly from the canvas or predefined palettes.</p>
</li>
<li>
<p><strong>Global/Local Pivot Toggle</strong>: Switches between global and local pivot points, allowing more precise control over transformations and rotations.</p>
</li>
</ul>
<p>… expand on the right-click menu …</p>
<h2 id="timeline">Timeline</h2>
<p><img src="/assets/documentation/ui/ui_panel5.png" alt="Timeline"></p>
<p>The Timeline is where animations and keyframes are managed. Users can control timing, easing, curves of every object parameter. All the hierarchy of shapes, layers, groups, helpers, etc. are displayed using the “layer concept”, that is, objects on top of the list lay in the canvas on top of other objects that lay below.</p>
<p>There is an option to filter the hierarchy to edit the objects that are listed.</p>
<p>It is possible to set a <strong><a href="tips.html#layer-blending-modes">Blending mode</a></strong> for every layer (or object).</p>
<h2 id="properties">Properties</h2>
<p><img src="/assets/documentation/ui/ui_panel6.png" alt="Properties"></p>
<p>By default the Properties panel displays the attributes of just the selected object, layer, group, etc.</p>
<p>In the case of selecting a Text object, then a panel with text parameters are shown.</p>
<p>At the bottom of the Properties panel there are a few options to <strong><a href="usage.html#alignment">easily align objects in the canvas</a></strong> relative to the canvas itself or other shapes.</p>
<h2 id="assets">Assets</h2>
<p><img src="/assets/documentation/ui/ui_panel7.png" alt="Assets"></p>
<p>The Assets panel manages <strong>linked</strong> files, images, audio, and other resources used in the project. By clicking the secondary mouse button in an asset it is possible to:</p>
<ul>
<li>
<p><strong>Reload</strong>: reads the file again from source.</p>
</li>
<li>
<p><strong>Replace</strong>: it lets the user select another file to replace the already linked one.</p>
</li>
<li>
<p><strong>Remove</strong>: it completely removes the object from the project.</p>
</li>
</ul>
<h2 id="queue">Queue</h2>
<p><img src="/assets/documentation/ui/ui_panel8.png" alt="Queue"></p>
<p>The Queue section manages rendering tasks and export jobs. Users can monitor the progress of ongoing processes and manage output settings.</p>
<h2 id="fill-and-stroke">Fill and Stroke</h2>
<p><img src="/assets/documentation/ui/ui_panel9.png" alt="Fill and Stroke"></p>
<p>The Fill and Stroke panel allows users to control the color, gradient, and outline (stroke) properties of objects. It provides precise control over visual styles.</p>
<p>Every shape has 2 parts:</p>
<ul>
<li><strong>Fill</strong>: the area contained in the drawn shape</li>
<li><strong>Stroke</strong>: the outline drawn along the shape</li>
</ul>
<p><img src="/assets/documentation/ui/ui_fill-stroke.png" alt="Fill and Stroke"></p>
<p>Fills and Strokes have 3 options to be drawn:</p>
<ul>
<li><strong>None</strong>: the element disables or turns invisible</li>
<li><strong>Flat</strong>: the element is colored with a flat or constant color</li>
<li><strong>Gradient</strong>: the element is colored using a gradient which is a transition of 2 or more colors. It can be <strong>linear</strong> or <strong>radial</strong>.</li>
</ul>
<p><img src="/assets/documentation/ui/ui_none-flat-gradients.png" alt="Fill and Stroke"></p>
<p><em>In the previous image the <code class="language-plaintext highlighter-rouge">fill</code> changes from left to right: none, flat, linear gradient and radial gradient.</em></p>
<h2 id="preferences">Preferences</h2>
<p><img src="/assets/documentation/ui/ui_panel10.png" alt="Preferences"></p>
<p>The Preferences menu contains settings for customizing scenes, preview resolution and layouts.</p>
<p>It might be important to note that it is also possible to fast edit <strong>Start/End scene frames</strong> at the <a href="#Timeline">Timeline playback row</a>, using the Left and Right spinboxes:</p>
<p><img src="/assets/documentation/ui/ui_panel10b.png" alt="Preferences"></p>
<h2 id="toolbox">Toolbox</h2>
<p><img src="/assets/documentation/ui/ui_panel11.png" alt="Color Toolbar"></p>
<p>This toolbar with dynamic buttons exposes most used parameters of <strong>just one selected object</strong> for easy and fast editing. It is even possible to animate values or use <code class="language-plaintext highlighter-rouge">Shift</code> modifier to edit <code class="language-plaintext highlighter-rouge">X</code> and <code class="language-plaintext highlighter-rouge">Y</code> values at the shame time. Exposed parameters change depending on the nature of the shape or object.</p>
<p><em>This is a new feature and will be improved in the near future to allow multiple selection and other commonly used parameters.</em></p>
<div class="nextPrevContainer">
<a href="https://friction.graphics/documentation"><span class="nextPrevButton">< Index</span></a>
<a href="/documentation/usage.html"><span class="nextPrevButton">Usage ></span></a>
</div>
</div>https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 準備做這個自踢屁屁的動畫，獻給馬拉錘
代码： 全选
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Usage</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Usage">
<meta name="twitter:title" content="Usage">
<meta name="description" content="Friction is a powerful and versatile motion graphics application that allows you to create vector and raster animations for web and video.">
<meta property="og:description" content="Friction is a powerful and versatile motion graphics application that allows you to create vector and raster animations for web and video.">
<meta name="twitter:description" content="Friction is a powerful and versatile motion graphics application that allows you to create vector and raster animations for web and video.">
<meta property="og:url" content="https://friction.graphics/documentation/usage.html">
<meta property="twitter:url" content="https://friction.graphics/documentation/usage.html">
<meta property="twitter:domain" content="friction.graphics">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:image" content="https://friction.graphics/assets/opengraph.png">
<meta name="twitter:image" content="https://friction.graphics/assets/opengraph.png">
<link href="https://friction.graphics/assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href="https://friction.graphics/assets/style.css?v=202512031142" rel="stylesheet" />
<link rel="alternate" type="application/rss+xml" title="Friction News Feed" href="https://friction.graphics/feed.xml">
</head>
<body>
<div id="headerDefault">
<div id="headerInner">
<a href="https://friction.graphics"><img src="https://friction.graphics/assets/logo.svg?v=202512031142" width="267px" height="80px" /></a>
<div>
<input id="menu-toggle" type="checkbox" />
<label class='menu-button-container' for="menu-toggle">
<div class='menu-button'></div>
</label>
<ul class="menu">
<li><a href="/news/" >News</a></li><li><a href="/download.html" >Download</a></li><li><a href="/documentation/" >Documentation</a></li><li><a href="/community.html" >Community</a></li>
</ul>
</div>
</div>
</div>
<div id="content">
<div id="breadcrumbs">
<a href="/">Home</a>
/ <a href="/documentation/">Documentation</a>
/ Usage
</div>
<div id="contentInner">
<h1 id="basic-usage">Basic Usage</h1>
<ul id="markdown-toc">
<li><a href="#basic-usage" id="markdown-toc-basic-usage">Basic Usage</a> <ul>
<li><a href="#project-and-first-scene-creation" id="markdown-toc-project-and-first-scene-creation">Project and first scene creation</a></li>
<li><a href="#canvas-zooming-and-panning" id="markdown-toc-canvas-zooming-and-panning">Canvas zooming and panning</a></li>
<li><a href="#creating-assets" id="markdown-toc-creating-assets">Creating assets</a></li>
<li><a href="#importing-and-linking" id="markdown-toc-importing-and-linking">Importing and linking</a></li>
<li><a href="#basic-animation" id="markdown-toc-basic-animation">Basic animation</a> <ul>
<li><a href="#keyframes" id="markdown-toc-keyframes">Keyframes</a></li>
<li><a href="#timeline" id="markdown-toc-timeline">Timeline</a></li>
<li><a href="#graph-view" id="markdown-toc-graph-view">Graph view</a></li>
</ul>
</li>
<li><a href="#preview" id="markdown-toc-preview">Preview</a></li>
<li><a href="#saving-the-project" id="markdown-toc-saving-the-project">Saving the project</a></li>
<li><a href="#export" id="markdown-toc-export">Export</a> <ul>
<li><a href="#animated-svg" id="markdown-toc-animated-svg">Animated SVG</a></li>
<li><a href="#rendered-animation" id="markdown-toc-rendered-animation">Rendered animation</a></li>
</ul>
</li>
<li><a href="#advanced" id="markdown-toc-advanced">Advanced</a> <ul>
<li><a href="#effects-and-shaders" id="markdown-toc-effects-and-shaders">Effects and shaders</a></li>
<li><a href="#tools" id="markdown-toc-tools">Tools</a></li>
<li><a href="#alignment" id="markdown-toc-alignment">Alignment</a></li>
<li><a href="#layouts" id="markdown-toc-layouts">Layouts</a></li>
</ul>
</li>
<li><a href="#learning-resources" id="markdown-toc-learning-resources">Learning resources</a> <ul>
<li><a href="#tutorials" id="markdown-toc-tutorials">Tutorials</a></li>
<li><a href="#video-tutorials" id="markdown-toc-video-tutorials">Video tutorials</a></li>
<li><a href="#other" id="markdown-toc-other">Other</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<p>After learning how the <a href="userinterface.html">User Interface</a> works, it is time to create a project, create or add some assets and start animating them.</p>
<p>It is important to understand that <strong>Friction is not a vector or raster drawing software but an animation one</strong>.</p>
<p>Sure it can create some basic vector based shapes such as rectangles, squares, ellipses, circles, shapes based on nodes and Bezier curves, hand drawn curves or even it’s possible to import bitmap images (raster) but there are lot of drawing tools that a regular designer would miss inside Friction if he insists on looking for them. Being that said, it is highly suggested to design the assets out of Friction and then import or link them into the software.</p>
<p>Some suggested tools for designing assets could be the following:</p>
<ul>
<li><strong>Vector graphics design</strong>
<ul>
<li><strong><a href="(https://inkscape.org/)">Inkscape</a></strong></li>
<li><strong><a href="https://affinity.serif.com/en-us/designer/">Affinity Designer</a></strong></li>
<li>any software capable of exporting to SVG vector graphics file.</li>
</ul>
</li>
<li><strong>Bitmap graphic design</strong>
<ul>
<li><strong><a href="(https://krita.org/)">Krita</a></strong></li>
<li><strong><a href="(https://www.gimp.org/)">Gimp</a></strong></li>
<li><strong><a href="https://affinity.serif.com/en-us/photo/">Affinity Photo</a></strong></li>
<li>any software capable of exporting to JPEG, PNG or WEBP image files.</li>
</ul>
</li>
</ul>
<h2 id="project-and-first-scene-creation">Project and first scene creation</h2>
<p>After opening Friction, the Canvas panel will prompt the user to:</p>
<ul>
<li><strong>New</strong>: create a new project.</li>
<li><strong>Open</strong>: open an existing Friction project choosing it using your OS file browser.</li>
<li><strong>Recent files</strong>: open an existing Friction project previously opened. Click the button to get a list of the available projects ordered by date (newest to oldest).</li>
</ul>
<p><img src="/assets/documentation/usage/usage_startup.png" alt="Startup window" /></p>
<p>Assuming it is the first time the user opens Friction, click on <code class="language-plaintext highlighter-rouge">New</code> to create a new project. A window will popup showing the Scene Properties:</p>
<p><img src="/assets/documentation/usage/usage_scene_properties.png" alt="Scene Properties window" /></p>
<p>An unique Friction project is capable to have any number of scenes but the first time a project is created it prompts the user to create the first one.</p>
<p>It is possible to set the parameters that define a scene (them all could be modified later):</p>
<ul>
<li>dimensions of the canvas: <strong>Width</strong> and <strong>Height</strong> expressed in pixels</li>
<li><strong>Duration</strong> of the scene: setting the first frame (usually 0) and the last one expressed in <code class="language-plaintext highlighter-rouge">frames</code> or <code class="language-plaintext highlighter-rouge">seconds</code>. Take into account that Friction internally works if <code class="language-plaintext highlighter-rouge">frames</code> so if the user selects <code class="language-plaintext highlighter-rouge">seconds</code> it will use the following parameter, FPS, to make the conversion into <code class="language-plaintext highlighter-rouge">frames</code>.</li>
<li><strong>FPS</strong> (Frames Per Second): number of frames per second.</li>
<li><strong>Background</strong>: a RGB color that defines the background scene color. Note that it allows setting a “transparent” color by setting the <code class="language-plaintext highlighter-rouge">Alpha color</code>to 0.</li>
</ul>
<p>Pressing the <code class="language-plaintext highlighter-rouge">...</code> buttons will list some default and commonly used values or custom ones used in previous projects.</p>
<p>When happy with the settings, the user can press on <code class="language-plaintext highlighter-rouge">OK</code> to create the very first scene.</p>
<p><img src="/assets/documentation/usage/usage_scene_blank.png" alt="Blank scene" /></p>
<p>At this point other panels and all tools are enabled to let the user start creating or adding (importing or linking) assets to the scene canvas.</p>
<h2 id="canvas-zooming-and-panning">Canvas zooming and panning</h2>
<p>As in other 2D graphical software the canvas can be navigated with two types of movements:</p>
<ul>
<li>
<p><strong>Pan</strong>: click and drag with the middle mouse button or use two fingers on your trackpad.</p>
</li>
<li>
<p><strong>Zoom</strong>: use the mouse wheel or using two fingers on your trackpad “pinch in” to zoom in or “pinch out” to zoom out.</p>
</li>
</ul>
<p><strong>Note:</strong> Gestures are only supported on macOS at the moment.</p>
<p>In <strong><code class="language-plaintext highlighter-rouge">View > Zoom</code></strong> there are additional ways of navigating the canvas such as <code class="language-plaintext highlighter-rouge">Fit to canvas</code> or <code class="language-plaintext highlighter-rouge">Reset Zoom</code> and them all can also be triggered using <a href="shortcuts.html">Keyboard Shortcuts</a>.</p>
<h2 id="creating-assets">Creating assets</h2>
<p>It’s possible to create basic shapes using Friction <strong><a href="userinterface.html#tools">Tools panel</a></strong>. If it’s the first time try creating a rectangle (<code class="language-plaintext highlighter-rouge">shift</code> + drag to create a square) or an ellipse (<code class="language-plaintext highlighter-rouge">shift</code> + drag to create a circle) by clicking and dragging the mouse pointer while in the canvas. Release to finish the creation of the shape.</p>
<p>These shapes are vector graphics so they can be edited afterwards so change to the <code class="language-plaintext highlighter-rouge">Object selection tool</code> and then select the shape. Now:</p>
<ul>
<li>in the <strong><a href="userinterface.html#properties">Properties panel</a></strong>: and expanding the item it is possible to browse and change all the parameters that define the shape.</li>
<li>in the <strong><a href="userinterface.html#fill-and-stroke">Fill and Stroke panel</a></strong>: it is possible to edit the fill type, color and some parameters related with the Fill and Stroke of the shape.</li>
<li>in the <strong><a href="userinterface.html#timeline">Timeline panel</a></strong>: it is possible to browse and change all the parameters that define the shape in a similar way than in the <strong><a href="userinterface.html#properties">Properties panel</a></strong> but here with the timeline to the right so that those parameters can be animated in time and more.</li>
</ul>
<p>For instance, go to the <strong><a href="userinterface.html#properties">Properties panel</a></strong> expand the shape to <code class="language-plaintext highlighter-rouge">Shape > transform > translation > x</code> and change the values so that the shape moves near the right side of the canvas.</p>
<p><img src="/assets/documentation/usage/usage_edit_parameter.png" alt="Change parameter value" /></p>
<p>Now, go to the <strong><a href="userinterface.html#fill-and-stroke">Fill and Stroke panel</a></strong> and under <code class="language-plaintext highlighter-rouge">Fill</code> change the type from <code class="language-plaintext highlighter-rouge">none</code> to <code class="language-plaintext highlighter-rouge">fill</code> and move the color channel sliders to select a nice color.</p>
<p><img src="/assets/documentation/usage/usage_edit_color.png" alt="Change color value" /></p>
<h2 id="importing-and-linking">Importing and linking</h2>
<p>As commented previously, Friction is not a vector graphics design software but an animation one so is highly suggested that assets are created externally.</p>
<p>There are two ways of importing assets:</p>
<ul>
<li>
<p><strong>Import</strong>: if the asset is <code class="language-plaintext highlighter-rouge">SVG</code> when using this option the shapes will be imported inside the project. It will be able to modify colors, shapes, etc. within Friction.</p>
</li>
<li>
<p><strong>Link</strong>: if the asset is a bitmap graphics one (<code class="language-plaintext highlighter-rouge">JPEG</code>, <code class="language-plaintext highlighter-rouge">PNG</code>,…) or even <code class="language-plaintext highlighter-rouge">SVG</code> vector, if using this option, they will be linked or externally referenced. A transform parameter will be added but the assets won’t be able to be edited within Friction. The great advantage of using this method is that they can be modified externally and the results will be automatically updated in Friction.
Each linked asset will be registered in the <strong><a href="userinterface.html#assets">Assets Panel</a></strong> and from there it will be able to <code class="language-plaintext highlighter-rouge">reload</code>, <code class="language-plaintext highlighter-rouge">replace</code> or <code class="language-plaintext highlighter-rouge">remove</code> the asset.</p>
</li>
</ul>
<p><img src="/assets/documentation/usage/usage_import_link.png" alt="Import and link buttons in the main window" /></p>
<p>Both options can be found in the <strong><a href="userinterface.html#main-toolbar">Main toolbar</a></strong> or under <code class="language-plaintext highlighter-rouge">File</code> menu.</p>
<p>Bitmap graphics will always be <strong>linked</strong>, even if they are added with the <strong>Import</strong> option as there are no tools for editing pixel base images within Friction.</p>
<p>Assets can be added by “drag & drop” from any file explorer to Friction canvas and they will be imported if possible (<code class="language-plaintext highlighter-rouge">SVG</code>) and linked if not (<code class="language-plaintext highlighter-rouge">JPEG</code>, <code class="language-plaintext highlighter-rouge">PNG</code>,…)</p>
<h2 id="basic-animation">Basic animation</h2>
<h3 id="keyframes">Keyframes</h3>
<p>Any object, shape or in general, any parameter of them could be animated using the <a href="https://en.wikipedia.org/wiki/Key_frame">keyframes technique</a>. There is no need to animate each frame but the important positions or values they will take over time, <strong>frames in the middle will be interpolated automatically</strong>.</p>
<p>For instance, select a shape, object, image, etc. already in the canvas, expand it properties to see <code class="language-plaintext highlighter-rouge">Object > Transform > Translate > x</code>. If the value is changed the position of all the frames of the scene will be updated unless the “animate value” button is activated:</p>
<p><img src="/assets/documentation/usage/usage_animate_value.png" alt="Animate value button" /></p>
<p>Once pressed the “dot icon” will turn from white to red color which means that value is animated. An alternative way of activating it is by selecting the parameter, opening the contextual menu with the secondary mouse button and selection the <code class="language-plaintext highlighter-rouge">Add Key(s)</code> option.
At the same moment the animation is activated, a keyframe icon (circle) will appear at the timeline right at the frame the <code class="language-plaintext highlighter-rouge">time line</code> is placed.</p>
<p>Following the example, if a keyframe for <code class="language-plaintext highlighter-rouge">Object > Transform > Translate > x</code> parameter is created at, for instance “frame 0”, then move the time line to another frame, for instance “frame 30”, and there change the value of the parameter, it can be done in different ways:</p>
<ul>
<li>changing the parameter value with the numerical field</li>
<li>moving the object to a different place in the canvas, that is, a place in the canvas with different <code class="language-plaintext highlighter-rouge">x</code> value.</li>
<li>if the time line is in a frame with no keyframe but the user wants to add a keyframe with the same value that is taking in that exact frame, open the contextual menu with the secondary mouse button and selection the <code class="language-plaintext highlighter-rouge">Add Key(s)</code> option</li>
<li>finally, the user can use the <code class="language-plaintext highlighter-rouge">Insert</code> keyboard button</li>
</ul>
<p>Individual keyframes can be removed by pressing <code class="language-plaintext highlighter-rouge">Delete</code> or using the contextual menu.</p>
<p>If the user wants to completely delete all the keyframes of the parameter, just press the red icon again and it will turn back to white meaning the parameter is no longer animated and it will take a single value along time. Note that the value it will “choose” to have will be the one taking and the frame where the time line is placed at the time the red button is pressed.</p>
<h3 id="timeline">Timeline</h3>
<p>The <strong><a href="userinterface.html#timeline">Timeline</a></strong> panel will be so helpful to see where the keyframes are placed along time and easy to remap their position in time as it is possible to click and drag them and move them to another time.</p>
<p>In this panel, it is possible to <code class="language-plaintext highlighter-rouge">copy</code>, <code class="language-plaintext highlighter-rouge">paste</code> and even <code class="language-plaintext highlighter-rouge">duplicate</code> keyframes to new frames just by placing the time line in the desired frame and running the command.</p>
<h3 id="graph-view">Graph view</h3>
<p>The interpolation between keyframes <strong>is linear by default</strong>, but this can be changed with the <code class="language-plaintext highlighter-rouge">Graph view</code> as it adds the possibility to edit the “speed” and evolution of the value animation from one keyframe to the other in a graphical way.</p>
<p>In order to activate it, it is needed to select at least one parameter (if more than one just add more to the selection using the <code class="language-plaintext highlighter-rouge">Shift</code> modifier, a color between the “activate animation” button and the parameter label will show the color of the graph curves) in the <strong><a href="userinterface.html#timeline">Timeline</a></strong> panel (it doesn’t work in the Properties panel as there is no timeline in that panel) and press the <code class="language-plaintext highlighter-rouge">Graph view</code> icon:</p>
<p><img src="/assets/documentation/usage/usage_graph_view_1.png" alt="Graph view button" /></p>
<p>Once the Graph view is activated this is what it would look like:</p>
<p><img src="/assets/documentation/usage/usage_graph_view_2.png" alt="Graph view button" /></p>
<p>It possible to select the keyframes (or nodes now as the curves are <strong>Bezier curves</strong>), turn on their tangent handles and some more by using the following buttons placed on the right-bottom of the graph view:</p>
<p><img src="/assets/documentation/usage/usage_graph_view_3.png" alt="Graph view button" /></p>
<p>From left to right:</p>
<ul>
<li><strong>Easing modes</strong>: some presets to easily animate the movement between two keyframes. It could take into account left (<code class="language-plaintext highlighter-rouge">in</code>) and/or right (<code class="language-plaintext highlighter-rouge">out</code>) nodes of the segment. Check the available ones <a href="tips.html#easing-reference-chart">here</a>.</li>
<li><strong>line segment</strong>: default “curve” between keyframes.</li>
<li><strong>curved segment</strong>: make the nodes (or keyframes) handles appear</li>
<li><strong>symmetric handles</strong>: make left and right handles symmetric</li>
<li><strong>smooth node</strong>: turn from corner to smooth handles, in this mode left and right node handles share the same tangency angle.</li>
<li><strong>corner nodes</strong>: turn from smooth to corner handles, in this mode left and right node handles have independent tangency angles.</li>
<li><strong>vertical fit view</strong>: fits all the keyframes (or nodes) in the view</li>
<li><strong>horizontal fit view</strong>: fits all the selected keyframes (or nodes) in the view. If none selected it will fit the whole scene.</li>
</ul>
<p>Example of keyframes with smooth handles:</p>
<p><img src="/assets/documentation/usage/usage_graph_view_4.png" alt="Graph view button" /></p>
<h2 id="preview">Preview</h2>
<p><img src="/assets/documentation/usage/usage_preview_play.png" alt="Play button" /></p>
<p>There are some ways to preview the scene animation within Friction:</p>
<ul>
<li><strong>Manual scrubbing</strong> the “time line” by dragging it left or right, this is not really a “mode” but it is very commonly done by animators.</li>
<li><strong>Preview Cache</strong>: playing the animation pressing the “Play” button on top of the time line. By default this preview will be rendered into a temporal cache and then played at realtime.</li>
<li><strong>in editor Preview</strong>: if <code class="language-plaintext highlighter-rouge">View > Preview Cache</code> menu checkbox is disabled, then the animation will be played without caching it, that is faster to play but it may be not in realtime as it will be dependent of your hardware (in case your computer is not capable of rendering all the frames at the scene FPS) so, it is possible that this preview is not played at realtime. The benefit of this mode is that selected objects will show their bounding boxes, pivots points, etc. and that may be interesting for the animator to check how the animation is performed.</li>
<li><strong>SVG Preview</strong>: in case the animation is designed inside all the features of SVG animation, it is possible to run the <code class="language-plaintext highlighter-rouge">Preview SVG</code> button in the <strong><a href="userinterface.html#main-toolbar">Main toolbar</a></strong> and preview it in the default SVG player of the computer (probably an Internet browser).</li>
</ul>
<h2 id="saving-the-project">Saving the project</h2>
<p>At any time, <strong>Friction</strong> lets users save the project into a file with <code class="language-plaintext highlighter-rouge">.friction</code> extension. Everything but linked assets will be saved inside the document. The file is binary so it can not be read with text editors but this may change in the future as there are plans to move into a text based project file.</p>
<h2 id="export">Export</h2>
<p>The <strong>Export</strong> feature let users publish the project animations (bundled into scenes) to media files. There are 2 main ways of exporting:</p>
<h3 id="animated-svg">Animated SVG</h3>
<p>This option will create an animated <strong>SVG</strong> file using the <em>non yet deprecated</em> <a href="https://www.w3.org/TR/REC-smil/"><strong>SMIL</strong> (Synchronized Multimedia Integration Language)</a> format. This format is mainly useful for <strong>web design</strong> as it creates lightweight files that are compatible with most Internet browsers and devices.</p>
<p>In order to export into <strong>SVG</strong> users will find 2 options:</p>
<ul>
<li><strong>Preview SVG</strong>: it will export and preview the file in your default Internet browser. It’s a very useful and fast way to quickly preview the animation.</li>
<li><strong>Export SVG</strong>: a new window will show up with options to generate the final <strong>SVG</strong> file. Among the self-explanatory options there is <code class="language-plaintext highlighter-rouge">Optimize for Web</code> that uses <strong><a href="https://github.com/svg/svgo">SVGO</a></strong> for reducing the file size and <code class="language-plaintext highlighter-rouge">Mix Blend Modes</code> that enables Layer color blending to the final SVG file using <code class="language-plaintext highlighter-rouge">CSS</code> rules.</li>
</ul>
<p><img src="/assets/documentation/export/export_svg-dialog.png" alt="Export SVG dialog" /></p>
<p>Both options are available in the <strong><a href="userinterface.html#main-toolbar">Main Toolbar</a></strong></p>
<p><strong>Important note</strong>: not all <strong>Friction</strong> features are compatible with animated SVG (and probably some are not implemented into the exporter yet). There is more information in the <a href="export.html#svg-animation">Export chapter</a>.</p>
<h3 id="rendered-animation">Rendered animation</h3>
<p>The second way of exporting is the conventional rendering of the scene animation into a video and/or audio format.</p>
<p>In order to config the export, users should open the <a href="userinterface.html#queue">Queue panel</a> and set:</p>
<ul>
<li><strong>Scene Properties</strong>: if they are correctly set and there is no need to trim, adjust or choose the <code class="language-plaintext highlighter-rouge">IN/OUT</code> option, this option could be skipped.</li>
<li><strong>Profiles</strong>: saved profiles are convenient for choosing video/audio, format, codecs and their settings.</li>
<li><strong>Format</strong>: in case of the need of manually changing the setttings here is the place to do it.</li>
</ul>
<p><img src="/assets/documentation/export/export_video-dialog.png" alt="Export Queue panel" /></p>
<p>For more information about all exporting options there is a whole section about <strong><a href="export.html#video--audio">Export options</a></strong>.</p>
<h2 id="advanced">Advanced</h2>
<h3 id="effects-and-shaders">Effects and shaders</h3>
<p>Using the previously commented features will let animators create pretty rich and complex animations but with the following features the animation process can be simplified in some cases and/or it will be possible to create new animations that could not be done with “traditional” animation. As considered as medium to advanced features, they are hidden by default, the way to show them all or one by one is by opening the contextual menu with the secondary mouse button and activating the needed ones. Once activated, new sections will appear in the object hierarchy, and listed in the natural place:</p>
<p><img src="/assets/documentation/usage/usage_effects.png" alt="Effects hierarchy" /></p>
<p>Following the previous picture, from top to bottom:</p>
<ul>
<li><strong>Custom Properties</strong>: it is able to create custom parameters to be used in the Expression editor and be able to animate or control easily how the object behaves along time. It is possible to create single or double value parameters.</li>
</ul>
<p><img src="/assets/documentation/usage/usage_custom_properties.png" alt="Custom Properties" /></p>
<ul>
<li><strong>Blend effects</strong>: these effect control the layer position of objects and they are useful when it is needed to animate it so that that position changes over time.</li>
<li><strong>Interactive SVG Properties</strong>: they control the SVG playback of the object as it allows to play it when hovering with the mouse, clicking, double clicking, etc.</li>
<li><strong>Transform effects</strong>: allow to manipulate objects in terms of position, rotation, scale, and skew and using other objects as reference.</li>
<li><strong>Path base effects</strong>: are applied directly to vector paths, allowing modifications such as Displace, Spatial Displace, Dash, Duplicate, Sub-Path, Solidify, Sum, Lines, ZigZag or Subdivide.</li>
<li><strong>Fill effects</strong>: control the fill properties of shapes, including solid colors, gradients, and patterns. The effect available are similar to the Path base effects but applied to fills.</li>
<li><strong>Outline base effects</strong>: same effects that applies to the outline applied to the object. The list of effects is the same of previous type of effects.</li>
<li><strong>Outline effects</strong>: create “new outlines” and applies the selected effect. The list of effects is the same of previous type of effects.</li>
</ul>
<p>More on this subject in separate sections <strong><a href="effects.html">Effects</a></strong> and <strong><a href="shaders.html">Shaders</a></strong>.</p>
<h3 id="tools">Tools</h3>
<ul>
<li><strong>Null objects</strong>: Adds an invisible reference object that can be used to group or control other elements by applying <code class="language-plaintext highlighter-rouge">Transform Effects</code> in the composition.</li>
</ul>
<h3 id="alignment">Alignment</h3>
<p>In the <strong><a href="userinterface.html#properties">Properties panel</a></strong> there is a group of dropdown and buttons that allow users to align one or several objects to the chosen reference.</p>
<p><img src="/assets/documentation/usage/usage_alignment_panel.png" alt="Alignment tools" /></p>
<p>The options allow aligning <code class="language-plaintext highlighter-rouge">Geometry</code>, <code class="language-plaintext highlighter-rouge">Geometry by its pivot</code> and just the <code class="language-plaintext highlighter-rouge">Pivot</code> and keeping the geometry in place.</p>
<p>The destination of the alignment is called “reference” and can be <code class="language-plaintext highlighter-rouge">Scene</code>, <code class="language-plaintext highlighter-rouge">Bounding box</code>, <code class="language-plaintext highlighter-rouge">Last selected</code> object or <code class="language-plaintext highlighter-rouge">Last selected pivot</code> which references to the last selected object pivot.</p>
<p>The buttons let users apply the alignment to just a side <code class="language-plaintext highlighter-rouge">Left</code>, <code class="language-plaintext highlighter-rouge">Horizontal center</code>, <code class="language-plaintext highlighter-rouge">Right</code>, <code class="language-plaintext highlighter-rouge">Top</code>, <code class="language-plaintext highlighter-rouge">Vertical center</code> and <code class="language-plaintext highlighter-rouge">Bottom</code>.</p>
<p><img src="/assets/documentation/usage/usage_alignment_example.gif" alt="Alignment example" /></p>
<h3 id="layouts">Layouts</h3>
<p><img src="/assets/documentation/usage/usage_layout.png" alt="Layouts" /></p>
<p>This feature lets users create and save different <code class="language-plaintext highlighter-rouge">Canvas</code> and/or <code class="language-plaintext highlighter-rouge">Timeline</code>divisions under a name and switch from one to another. It doesn’t save panels position or visibility state (shown or hidden) but the size, number and scene applied to the <code class="language-plaintext highlighter-rouge">Canvas</code> and <code class="language-plaintext highlighter-rouge">Timeline</code> divisions:</p>
<p><img src="/assets/documentation/ui/ui_timeline-splitting-panel.png" alt="Division splitter" /></p>
<h2 id="learning-resources">Learning resources</h2>
<p>This is an always growing chapter and over time new resources could be included.</p>
<p>It is interesting know that <strong>Friction</strong> is a fork of <strong>Enve</strong> so if you don’t find a tutorial or video explaining a feature, you might find it if you do an Internet search with the <code class="language-plaintext highlighter-rouge">Enve</code> keyword on it.</p>
<h3 id="tutorials">Tutorials</h3>
<ul>
<li><strong><a href="https://theflydesign.es/manual-enve-2d-animation-english/">Enve manual</a></strong></li>
</ul>
<h3 id="video-tutorials">Video tutorials</h3>
<ul>
<li><strong><a href="https://www.youtube.com/watch?v=dIzzXyrJRHs">Friction 2d Beginner Tutorial - Freeware Camp</a></strong></li>
<li><strong><a href="https://github.com/orgs/friction2d/discussions/403">Introduction to Friction2d (Tutorial)</a></strong></li>
<li><strong><a href="https://www.youtube.com/playlist?list=PLiIhhu566LD9xzcRXgRqMkr8sIqaKO1HF">Beginner Enve Tutorials</a></strong></li>
<li><strong><a href="https://www.youtube.com/playlist?list=PLiIhhu566LD-4zvcPCCGZtp1KS1Ew5Ehu">Beginner’s Complete Guide To Enve 2D</a></strong></li>
<li><strong><a href="https://www.youtube.com/playlist?list=PLQFW7x3qFlrBAqVFHCS8QGf2ooegv4riN">Enve’s Alexander Kiryanov advanced tutorials</a></strong></li>
</ul>
<h3 id="other">Other</h3>
<ul>
<li><strong><a href="https://github.com/orgs/friction2d/discussions/434">Friction Tips meta-thread</a></strong></li>
<li><strong><a href="https://github.com/orgs/friction2d/discussions/407">Friction2d (Friction 2d) Showcase/Renders</a></strong></li>
<li><strong><a href="https://github.com/orgs/friction2d/discussions/292">Expressions tutorial?</a></strong></li>
<li><strong><a href="https://github.com/orgs/friction2d/discussions/242">Support of Common Expressions in Friction’s Expression Editor</a></strong></li>
<li><strong><a href="https://github.com/orgs/friction2d/discussions">Friction discussion panel</a></strong></li>
<li><strong>Friction social platforms</strong> (linked in the this web page footer)</li>
</ul>
<div class="nextPrevContainer">
<a href="/documentation/userinterface.html"><span class="nextPrevButton">< User Interface</span></a>
<a href="/documentation/export.html"><span class="nextPrevButton">Export ></span></a>
</div>
</div>
</div>
<div id="footer">
<div id="footerInner">
<p>Copyright © Friction contributors.<br><a href="https://friction.graphics/privacy.html">Privacy Statement</a> • <a href="https://friction.graphics/public.key">PGP Public Key</a></p>
<p>
<a target="_blank" href="https://github.com/friction2d/friction" title="Join us on GitHub"><img src="https://friction.graphics/assets/github-mark-white.svg" height="24" /></a>
<!-- <a target="_blank" href="https://gitlab.com/friction-graphics/friction" title="Join us on GitLab"><img src="https://friction.graphics/assets/gitlab.svg" height="24" /></a> -->
<!-- <a target="_blank" href="https://codeberg.org/friction/friction" title="Join us on Codeberg"><img src="https://friction.graphics/assets/codeberg.svg" height="24" /></a> -->
<a target="_blank" rel="me" href="https://floss.social/@friction" title="Join us on Mastodon"><img src="https://friction.graphics/assets/mastodon-white.svg" height="24" /></a>
<a target="_blank" rel="me" href="https://bsky.app/profile/friction.graphics" title="Join us on Bluesky"><img src="https://friction.graphics/assets/bsky.svg" height="24" /></a>
<a target="_blank" rel="me" href="https://x.com/FrictionGFX" title="Join us on X/Twitter"><img src="https://friction.graphics/assets/xtwitter.svg" height="24" /></a>
<a target="_blank" rel="me" href="https://www.youtube.com/@friction-graphics" title="Join us on YouTube"><img src="https://friction.graphics/assets/youtube.svg" height="24" /></a>
<a href="https://friction.graphics/feed.xml" title="News Feed"><img src="https://friction.graphics/assets/rss.svg" height="24" /></a>
</p>
</div>
</div>
</body>
</html>
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
在线用户
正浏览此版面之用户： 没有注册用户 和 11 访客