HeroTransitions/Hero
1
1
Fork 0
mirror of https://github.com/HeroTransitions/Hero.git synced 2024-10-03 20:29:50 +03:00
Code Issues Projects Releases Wiki Activity

add isHeroEnabledForSubviews

Browse Source
This commit is contained in:
Luke Zhao 2017-06-14 11:52:49 -04:00
parent c8e446fbaa
commit c157a1b83e
11 changed files with 1764 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
Resources/Hero.svg Normal file
View File

@ -0,0 +1,44 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="750px" height="250px" viewBox="0 0 750 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Hero</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="darkOrangeGradient">
<stop stop-color="#FF8938" offset="0%"></stop>
<stop stop-color="#F76F1E" offset="100%"></stop>
</linearGradient>
<linearGradient x1="70.563613%" y1="-29.9665328%" x2="39.8308304%" y2="90.2273182%" id="centerOrangeGradient">
<stop stop-color="#FBDA61" offset="0%"></stop>
<stop stop-color="#F76B1C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="defaultOrangeGradient">
<stop stop-color="#FBDA61" offset="0%"></stop>
<stop stop-color="#F76B1C" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Hero">
<text id="Hero" font-family="HelveticaNeue-UltraLight, Helvetica Neue" font-size="280" font-weight="200" fill="#FD8332">
<tspan x="250" y="231">H</tspan>
<tspan x="420" y="231">e</tspan>
<tspan x="550" y="231">r</tspan>
<tspan x="610" y="231">o</tspan>
</text>
<g id="right" transform="translate(100,0)">
<path d="M0,-1.42108547e-14 L52.6291862,30.0738207 C62.2228218,35.5558982 70,48.9562589 70,59.9930619 L70,250 L1.42108547e-14,210 L0,-1.42108547e-14 Z" id="top" fill="url(#defaultOrangeGradient)"></path>
<polygon id="bottom" fill="url(#darkOrangeGradient)" points="0 100 70 130 70 250 0 210"></polygon>
</g>
<path d="M0,100 L100,100 L170,130 L100.003297,130 C83.4329338,130 70,143.431508 70,159.994535 L70,160 L0,100 Z" id="center" fill="url(#centerOrangeGradient)">
</path>
<g id="left">
<path d="M0,0
C0,0 0,0 0,0
L52.6291862,30.0738207
C62.2228218,35.5558982 70,48.9562589 70,59.9930619
L70,250
C70,250 70,250 70,250
L0,210
C0,210 0,210 0,210
L0,0 Z;" id="orange" fill="url(#defaultOrangeGradient)">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

230
Resources/HeroAnimated.svg Normal file
View File

@ -0,0 +1,230 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="750px" height="250px" viewBox="0 0 750 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Hero</title>
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="darkOrangeGradient">
<stop stop-color="#FF8938" offset="0%"></stop>
<stop stop-color="#F76F1E" offset="100%"></stop>
</linearGradient>
<linearGradient x1="70.563613%" y1="-29.9665328%" x2="39.8308304%" y2="90.2273182%" id="centerOrangeGradient">
<stop stop-color="#FBDA61" offset="0%"></stop>
<stop stop-color="#F76B1C" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="defaultOrangeGradient">
<stop stop-color="#FBDA61" offset="0%"></stop>
<stop stop-color="#F76B1C" offset="100%"></stop>
</linearGradient>
</defs>
<g id="Hero">
<text id="Hero" font-family="HelveticaNeue-UltraLight, Helvetica Neue" font-size="280" font-weight="200" fill="#FD8332">
<tspan x="250" y="231">H
<animate
attributeName="font-size"
values="280;0;0;280;280"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.23;0.28;1"
begin="5.6s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="231;180;180;231;231"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.23;0.28;1"
begin="5.6s"
repeatCount="indefinite"
fill="freeze" />
</tspan>
<tspan x="420" y="231">e
<animate
attributeName="font-size"
values="280;0;0;280;280"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.27;0.32;1"
begin="5.4s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="231;180;180;231;231"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.27;0.32;1"
begin="5.4s"
repeatCount="indefinite"
fill="freeze" />
</tspan>
<tspan x="550" y="231">r
<animate
attributeName="font-size"
values="280;0;0;280;280"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.31;0.36;1"
begin="5.2s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="231;180;180;231;231"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.31;0.36;1"
begin="5.2s"
repeatCount="indefinite"
fill="freeze" />
</tspan>
<tspan x="610" y="231">o
<animate
attributeName="font-size"
values="280;0;0;280;280"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.35;0.4;1"
begin="5s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="231;180;180;231;231"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.35;0.4;1"
repeatCount="indefinite"
begin="5s"
fill="freeze" />
</tspan>
</text>
<g id="right" transform="translate(100,0)">
<path d="M0,-1.42108547e-14 L52.6291862,30.0738207 C62.2228218,35.5558982 70,48.9562589 70,59.9930619 L70,250 L1.42108547e-14,210 L0,-1.42108547e-14 Z" id="top" fill="url(#defaultOrangeGradient)"></path>
<polygon id="bottom" fill="url(#darkOrangeGradient)" points="0 100 70 130 70 250 0 210"></polygon>
<animateTransform attributeName="transform"
type="translate"
values="100 0;0 0;0 0;100 0;100 0"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.19;0.24;1"
begin="5.8s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="1;0;1;1"
dur="10s"
calcMode="discrete"
keyTimes="0;0.05;0.19;1"
begin="5.8s"
repeatCount="indefinite"
fill="freeze" />
</g>
<path d="M0,100 L100,100 L170,130 L100.003297,130 C83.4329338,130 70,143.431508 70,159.994535 L70,160 L0,100 Z" id="center" fill="url(#centerOrangeGradient)">
<animate
attributeName="d"
values="M0,100 L100,100 L170,130 L100.003297,130 C83.4329338,130 70,143.431508 70,159.994535 L70,160 L0,100 Z;
M0,100 L0,100 L70,130 L70,130 C70,130 70,130 70,130 L70,160 L0,100 Z;
M0,100 L0,100 L70,130 L70,130 C70,130 70,130 70,130 L70,160 L0,100 Z;
M0,100 L100,100 L170,130 L100.003297,130 C83.4329338,130 70,143.431508 70,159.994535 L70,160 L0,100 Z;
M0,100 L100,100 L170,130 L100.003297,130 C83.4329338,130 70,143.431508 70,159.994535 L70,160 L0,100 Z;"
dur="10s"
begin="5.8s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.05;0.19;0.24;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="1;0;1;1"
dur="10s"
begin="5.8s"
calcMode="discrete"
keyTimes="0;0.05;0.19;1"
repeatCount="indefinite"
fill="freeze" />
</path>
<g id="left">
<path d="M0,0
C0,0 0,0 0,0
L52.6291862,30.0738207
C62.2228218,35.5558982 70,48.9562589 70,59.9930619
L70,250
C70,250 70,250 70,250
L0,210
C0,210 0,210 0,210
L0,0 Z;" id="orange" fill="url(#defaultOrangeGradient)">
<animate
attributeName="d"
values="
M0,0
C0,0 0,0 0,0
L52.6291862,30.0738207
C62.2228218,35.5558982 70,48.9562589 70,59.9930619
L70,250
C70,250 70,250 70,250
L0,210
C0,210 0,210 0,210
L0,0 Z;
M35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125 Z;
M35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125
C35,125 35,125 35,125
L35,125 Z;
M0,0
C0,0 0,0 0,0
L52.6291862,30.0738207
C62.2228218,35.5558982 70,48.9562589 70,59.9930619
L70,250
C70,250 70,250 70,250
L0,210
C0,210 0,210 0,210
L0,0 Z;
M0,0
C0,0 0,0 0,0
L52.6291862,30.0738207
C62.2228218,35.5558982 70,48.9562589 70,59.9930619
L70,250
C70,250 70,250 70,250
L0,210
C0,210 0,210 0,210
L0,0 Z;"
dur="10s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="6.3s"
keyTimes="0;0.05;0.10;0.15;1"
repeatCount="indefinite"
fill="freeze"
id="leftShrink" />
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

303
Resources/advanced.svg Normal file
View File

@ -0,0 +1,303 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="316px" height="180px" viewBox="0 0 316 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
<rect id="square" fill="#FC3A5E" x="-8" y="-8" width="16" height="16" rx="5"></rect>
<g id="v1">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
VC 1
</text>
<g transform="translate(0, 21)">
<rect fill="#99A9BA" x="0" y="0" width="64" height="126" rx="11"></rect>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#DDDDDD" x="32" y="74" width="16" height="16" rx="8"></rect>
</g>
</g>
</g>
<g id="v2">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
VC 2
</text>
<g transform="translate(0, 21)">
<rect fill="#99A9BA" x="0" y="0" width="64" height="126" rx="11"></rect>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#DDDDDD" x="8" y="12" width="40" height="16" rx="8"></rect>
<g transform="translate(0, 45)">
<use x="10" xlink:href="#square" />
<use x="28" xlink:href="#square" />
<use x="46" xlink:href="#square" />
</g>
<g transform="translate(0, 63)">
<use x="10" xlink:href="#square" />
<use x="28" xlink:href="#square" />
<use x="46" xlink:href="#square" />
</g>
<g transform="translate(0, 81)">
<use x="10" xlink:href="#square" />
<use x="28" xlink:href="#square" />
<use x="46" xlink:href="#square" />
</g>
</g>
</g>
</g>
<g id="animate">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Result
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g transform="translate(0, 45)">
<use transform="translate(10,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(28,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.04s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.04s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(46,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.08s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.08s"
repeatCount="indefinite"
fill="freeze" />
</use>
</g>
<g transform="translate(0, 63)">
<use transform="translate(10,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.12s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.12s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(28,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.16s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.16s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(46,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.2s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.2s"
repeatCount="indefinite"
fill="freeze" />
</use>
</g>
<g transform="translate(0, 81)">
<use transform="translate(10,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.24s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.24s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(28,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.28s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
begin="0.28s"
repeatCount="indefinite"
fill="freeze" />
</use>
<use transform="translate(46,0)" xlink:href="#square">
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
begin="0.32s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 0; 0"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.32s"
repeatCount="indefinite"
fill="freeze" />
</use>
</g>
<rect fill="#DDDDDD" x="32" y="74" width="16" height="16" rx="8">
<animate
attributeName="x"
values="32;8;8;32;32"
dur="2s"
keyTimes="0;0.15;0.6;0.75;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="74;12;12;74;74"
dur="2s"
keyTimes="0;0.15;0.6;0.75;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="width"
values="16;40;40;16;16"
dur="2s"
keyTimes="0;0.15;0.6;0.75;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
</defs>
<g transform="translate(0, 16)">
<use x="0" xlink:href="#v1" />
<use x="84" xlink:href="#v2" />
<use x="252" xlink:href="#animate" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

268
Resources/defaultAnimations.svg Normal file
View File

@ -0,0 +1,268 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400px" height="211px" viewBox="0 0 400 211" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
<g id="push">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Push
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<rect fill="#37D0AB" x="0" y="0" width="56" height="98">
<animate
attributeName="fill"
values="#37D0AB;#27B08B;#27B08B;#37D0AB;#37D0AB"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="15" y="66">1</tspan>
</text>
<animateTransform attributeName="transform"
type="translate"
values="0 0;-15 0;-15 0;0 0;0 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<g>
<rect fill="#3A97FC" x="0" y="0" width="56" height="98"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="14" y="65">2</tspan>
</text>
<animateTransform attributeName="transform"
type="translate"
values="56 0;0 0;0 0;56 0;56 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
<g id="slide">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Slide
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<rect fill="#37D0AB" x="0" y="0" width="56" height="98"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="15" y="66">1</tspan>
</text>
<animateTransform attributeName="transform"
type="translate"
values="0 0;0 98;0 98;0 0;0 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<g>
<rect fill="#3A97FC" x="0" y="0" width="56" height="98"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="14" y="65">2</tspan>
</text>
<animateTransform attributeName="transform"
type="translate"
values="0 -98;0 0;0 0;0 -98;0 -98"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
<g id="zoomSlide">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
ZoomSlide
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<g transform="translate(28, 49)">
<rect fill="#37D0AB" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-13" y="17">1</tspan>
</text>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="1 1;0.5 0.5;0.5 0.5;1 1;1 1"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<animateTransform attributeName="transform"
type="translate"
values="0 0;56 0;56 0;0 0;0 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<g>
<g transform="translate(28, 49)">
<rect fill="#3A97FC" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-14" y="16">2</tspan>
</text>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<animateTransform attributeName="transform"
type="translate"
values="-56 0;0 0;0 0;-56 0;-56 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
<g id="cover">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Cover
</text>
<g id="Phone" transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<g transform="translate(28, 49)">
<rect fill="#37D0AB" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-13" y="17">1</tspan>
</text>
</g>
</g>
<g>
<g transform="translate(28, 49)">
<rect fill="#3A97FC" x="-28" y="-49" width="56" height="98"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-14" y="16">2</tspan>
</text>
</g>
<animateTransform attributeName="transform"
type="translate"
values="0 98;0 0;0 0;0 98;0 98"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
<g id="page">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Page
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<g transform="translate(28, 49)">
<rect fill="#37D0AB" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-13" y="17">1</tspan>
</text>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="1 1;0.7 0.7;0.7 0.7;1 1;1 1"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
<g>
<g transform="translate(28, 49)">
<rect fill="#3A97FC" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-14" y="16">2</tspan>
</text>
</g>
<animateTransform attributeName="transform"
type="translate"
values="56 0;0 0;0 0;56 0;56 0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
</defs>
<g transform="translate(0, 40)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="137" y="-20" text-anchor="center" alignment-baseline="central">
Support Any Direction
</text>
<use x="0" xlink:href="#push" />
<use x="84" xlink:href="#slide" />
<use x="168" xlink:href="#zoomSlide" />
<use x="252" xlink:href="#cover" />
<use x="336" xlink:href="#page" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

105
Resources/defaultAnimations2.svg Normal file
View File

@ -0,0 +1,105 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="148px" height="211px" viewBox="0 0 148 211" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
<g id="fade">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Fade
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<rect fill="#37D0AB" x="0" y="0" width="56" height="98">
</rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="15" y="66">1</tspan>
</text>
</g>
<g>
<rect fill="#3A97FC" x="0" y="0" width="56" height="98"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="14" y="65">2</tspan>
</text>
<animate
attributeName="opacity"
values="0;1;1;0;0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
<g id="zoom">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Zoom
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g>
<g transform="translate(28, 49)">
<rect fill="#3A97FC" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-14" y="16">2</tspan>
</text>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.7 0.7;1 1;1 1;0.7 0.7;0.7 0.7"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
<g>
<g transform="translate(28, 49)">
<rect fill="#37D0AB" x="-28" y="-49" width="56" height="98" rx="6"></rect>
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="50" fill="#000000">
<tspan x="-13" y="17">1</tspan>
</text>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="1 1;1.5 1.5;1.5 1.5;1 1;1 1"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="1;0;0;1;1"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
</g>
</g>
</g>
</g>
</defs>
<g transform="translate(0, 40)">
<use x="0" xlink:href="#fade" />
<use x="84" xlink:href="#zoom" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

335
Resources/features.svg Normal file
View File

@ -0,0 +1,335 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="316px" height="180px" viewBox="0 0 316 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
</defs>
<g>
<g transform="translate(0, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Match
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<path id="matchImage" fill="#3A97FC">
<animate
attributeName="d"
values="M10,25.0007413
C10,20.5820539 13.5789089,17 18.0067112,17
L38.0075018,17
C42.4216367,17 46,20.5834312 46,25.0007413
L46,44.9992587
C46,49.4179461 42.4165688,53 37.9992587,53
L18.0007413,53
C13.5820539,53 10,49.4165688 10,44.9992587
L10,25.0007413 Z;
M0,5.99226572
C0,2.68282874 2.68333378,0 5.99828462,0
L50.003058,0
C53.3150776,0 56,2.69179915 56,5.99226572
L56,57
C56,57 56,57 56,57
L0,57
C0,57 0,57 0,57
L0,5.99226572 Z;
M0,5.99226572
C0,2.68282874 2.68333378,0 5.99828462,0
L50.003058,0
C53.3150776,0 56,2.69179915 56,5.99226572
L56,57
C56,57 56,57 56,57
L0,57
C0,57 0,57 0,57
L0,5.99226572 Z;
M10,25.0007413
C10,20.5820539 13.5789089,17 18.0067112,17
L38.0075018,17
C42.4216367,17 46,20.5834312 46,25.0007413
L46,44.9992587
C46,49.4179461 42.4165688,53 37.9992587,53
L18.0007413,53
C13.5820539,53 10,49.4165688 10,44.9992587
L10,25.0007413 Z;
M10,25.0007413
C10,20.5820539 13.5789089,17 18.0067112,17
L38.0075018,17
C42.4216367,17 46,20.5834312 46,25.0007413
L46,44.9992587
C46,49.4179461 42.4165688,53 37.9992587,53
L18.0007413,53
C13.5820539,53 10,49.4165688 10,44.9992587
L10,25.0007413 Z;"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
repeatCount="indefinite"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
fill="freeze" />
</path>
<path id="matchButton" fill="#DDDDDD">
<animate
attributeName="d"
values="M20,80
C20,75.581722 23.5788202,72 28,72
L28,72
C32.418278,72 36,75.5907123 36,80
L36,80
C36,84.418278 32.4092877,88 28,88
L28,88
C23.581722,88 20,84.4092877 20,80
L20,80 Z;
M0,86
C0,86 0,86 0,86
L56,86
C56,86 56,86 56,86
L56,92
C56,95.3137085 53.3178698,98 50.007019,98
L5.99298096,98
C2.68314897,98 0,95.3069658 0,92
L0,92 Z;
M0,86
C0,86 0,86 0,86
L56,86
C56,86 56,86 56,86
L56,92
C56,95.3137085 53.3178698,98 50.007019,98
L5.99298096,98
C2.68314897,98 0,95.3069658 0,92
L0,92 Z;
M20,80
C20,75.581722 23.5788202,72 28,72
L28,72
C32.418278,72 36,75.5907123 36,80
L36,80
C36,84.418278 32.4092877,88 28,88
L28,88
C23.581722,88 20,84.4092877 20,80
L20,80 Z;
M20,80
C20,75.581722 23.5788202,72 28,72
L28,72
C32.418278,72 36,75.5907123 36,80
L36,80
C36,84.418278 32.4092877,88 28,88
L28,88
C23.581722,88 20,84.4092877 20,80
L20,80 Z;"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</path>
</g>
</g>
</g>
<g id="Scale" transform="translate(84, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Scale
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<g transform="translate(28, 57)" opacity="0">
<rect id="Rectangle-2" fill="#3A97FC" x="-18" y="-18" width="36" height="36" rx="8">
</rect>
<animateTransform attributeName="transform"
type="scale"
additive="sum"
values="0.5 0.5;1 1;1 1;0.5 0.5;0.5 0.5"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
begin="0.25s"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="opacity"
values="0;1;1;0;0"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
begin="0.25s"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</g>
<rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
<animate
attributeName="width"
values="18; 36; 36; 18; 18"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.25s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="x"
values="19;10;10;19;19"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.25s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="38;21;21;38;38"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.25s"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
<g id="Translate" transform="translate(168, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Translate
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect id="Rectangle-2" fill="#3A97FC" x="-50" y="39" width="36" height="36" rx="8">
<animate
attributeName="x"
values="-50; 10; 10; -50; -50;"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.5s"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
<animate
attributeName="width"
values="18; 36; 36; 18; 18"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.5s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="x"
values="19;10;10;19;19"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.5s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="38;21;21;38;38"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.5s"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
<g id="Rotate" transform="translate(252, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Rotate
</text>
<g id="Phone" transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle id="Home" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g id="Screen" transform="translate(4, 14)" clip-path="url(#screen)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect id="rect" fill="#3A97FC" x="-50" y="39" width="36" height="36" rx="8">
<animate
attributeName="x"
values="-50; 10; 10; -50; -50;"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
<animateTransform
attributeName="transform"
type="rotate"
values="0 28 57;-180 28 57;-180 28 57;0 28 57;0 28 57;"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.75s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze"
/>
</rect>
<rect id="Rectangle-4" fill="#DDDDDD" x="19" y="38" width="18" height="13" rx="6.5">
<animate
attributeName="width"
values="18; 36; 36; 18; 18"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="x"
values="19;10;10;19;19"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="38;21;21;38;38"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

240
Resources/features2.svg Normal file
View File

@ -0,0 +1,240 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="316px" height="180px" viewBox="0 0 316 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Arc" transform="translate(0, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Arc
</text>
<g id="Group" transform="translate(0, 21)">
<rect id="Rectangle" fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle id="Oval" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g id="Group-2" transform="translate(4, 14)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<path d="M16.5,25.5 C16.5,25.5 16,52 22.5,63 C31,74 41.5,72.5 41.5,72.5"
id="arcPath" stroke="#DDDDDD" stroke-linecap="round"></path>
<rect id="Rectangle-2" fill="#3A97FC" x="-8.5" y="-8.5" width="17" height="17" rx="8.5">
<animateMotion id="arcDown" dur=".4s" fill="freeze" begin="0s;arcUp.end + 0.6s"
calcMode="spline"
keySplines="0.4,0,0.2,1"
keyTimes="0;1">
<mpath xlink:href="#arcPath" />
</animateMotion>
<animateMotion id="arcUp" dur=".4s" fill="freeze" begin="arcDown.end + 0.6s" keyPoints="1;0"
calcMode="spline"
keySplines="0.4,0,0.2,1"
keyTimes="0;1">
<mpath xlink:href="#arcPath" />
</animateMotion>
</rect>
</g>
</g>
</g>
<g id="Cascade" transform="translate(84, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Cascade
</text>
<g id="Group" transform="translate(0, 21)">
<rect id="Rectangle" fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle id="Oval" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g id="Group-2" transform="translate(4, 14)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect id="Rectangle-2" fill="white" x="9" y="19" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.25s"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect id="Rectangle-2-Copy" fill="white" x="31" y="19" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.30s"
repeatCount="indefinite"
fill="freeze" /></rect>
<rect id="Rectangle-2" fill="white" x="9" y="63" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.45s"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect id="Rectangle-2-Copy" fill="white" x="31" y="63" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.5s"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect id="Rectangle-2" fill="white" x="9" y="41" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.35s"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect id="Rectangle-2-Copy" fill="white" x="31" y="41" width="16" height="16" rx="8">
<animate
attributeName="fill"
values="white; #3A97FC; #3A97FC; white; white"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.4s"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
<g id="Interactive" transform="translate(168, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Interactive
</text>
<g id="Group" transform="translate(0, 21)">
<rect id="Rectangle" fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle id="Oval" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g id="Group-2" transform="translate(4, 14)" clip-path="url(#screen)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<path d="M28,73 C28,73 29.5,58.5 34.5,44.5 C39.5,30.5 42,32.5 43,27 C44,21.5 38,17 30.5,17 C23,17 17.5,18.5 17.5,23 C17.5,27.5 43,31.5 43,22 C43,12.5 19,11.5 19,28.5 C19,45.5 28,73 28,73 Z" id="interactivePath" stroke="white"></path>
<g id="Box" transform="translate(-19, -19)">
<rect id="Rectangle-2" fill="#3A97FC" x="0" y="0" width="38" height="38" rx="8"></rect>
<rect id="Rectangle-2" stroke="#FFFFFF" fill-opacity="0.520493659" fill="#F0FFFC" x="19" y="9" width="10" height="10" rx="5">
<animate
attributeName="opacity"
values="0; 1.0; 1.0; 1.0; 0"
dur="1s"
begin="0s;interactiveAnim.end+0.5s"
fill="freeze" />
</rect>
<animateMotion dur="1s" fill="freeze" begin="0s;interactiveAnim.end+1s" id="interactiveAnim">
<mpath xlink:href="#interactivePath" />
</animateMotion>
</g>
</g>
</g>
</g>
<g id="Dynamic" transform="translate(252, 16)">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Dynamic
</text>
<g id="Group" transform="translate(0, 21)">
<rect id="Rectangle" fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle id="Oval" fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g id="Group-2" transform="translate(4, 14)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect id="Rectangle-2" stroke="#FFFFFF" fill-opacity="0.520493659" fill="#F0FFFC" x="28" y="44" width="10" height="10" rx="5"></rect>
<circle id="Rectangle-2" fill="#3A97FC" cx="9" cy="14" r="5">
<animate
attributeName="cx"
values="9;13;13;9;9"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
begin="0.75s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="cy"
values="14;84;84;14;14"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="r"
values="5; 9; 9; 5; 5"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.75s"
repeatCount="indefinite"
fill="freeze" />
</circle>
<circle id="Rectangle-2" fill="#3A97FC" cx="25" cy="20" r="7">
<animate
attributeName="cx"
values="25;31;31;25;25"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.8s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="cy"
values="20;79;79;20;20"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.8s"
repeatCount="indefinite"
fill="freeze" />
</circle>
<circle id="Rectangle-2" fill="#3A97FC" cx="43" cy="28" r="8">
<animate
attributeName="cx"
values="43;47;47;43;43"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.85s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="cy"
values="28;76;76;28;28"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.85s"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="r"
values="8; 5; 5; 8; 8"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
begin="0.85s"
repeatCount="indefinite"
fill="freeze" />
</circle>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

47
Resources/globalCoordinate.svg Normal file
View File

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="136px" height="270px" viewBox="0 0 136 270" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Global Coordinate Space</title>
<defs>
<clipPath>
<rect x="0" y="0" width="120" height="208" rx="10"></rect>
</clipPath>
</defs>
<g transform="translate(0.000000, 0.000000)">
<rect fill="#0C1E31" x="0" y="0" width="136" height="270" rx="18"></rect>
<circle fill="#FC3A5E" cx="68" cy="253" r="9"></circle>
<g transform="translate(8.000000, 31.000000)">
<rect fill="#FFFFFF" x="0" y="0" width="119.325312" height="208.819297" rx="10"></rect>
<rect fill="#D8D8D8" x="21" y="30" width="78" height="78" rx="9">
<animate
attributeName="y"
values="30;100;100;30;30"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#555555" x="29" y="42" width="24" height="24" rx="9">
<animate
attributeName="y"
values="42;112;112;42;42"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#FC3A5E" x="29" y="72" width="24" height="24" rx="9">
<animate
attributeName="x"
values="29;66;66;29;29"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

55
Resources/localCoordinate.svg Normal file
View File

@ -0,0 +1,55 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="136px" height="270px" viewBox="0 0 136 270" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Local Coordinate Space</title>
<defs>
<clipPath id="screen">
<rect id="whiteScreen" x="0" y="0" width="120" height="208" rx="10"></rect>
</clipPath>
</defs>
<g id="Group" transform="translate(0.000000, 0.000000)">
<rect id="Rectangle" fill="#0C1E31" x="0" y="0" width="136" height="270" rx="18"></rect>
<circle id="Oval" fill="#FC3A5E" cx="68" cy="253" r="9"></circle>
<g id="screen2" transform="translate(8.000000, 31.000000)">
<rect id="Rectangle-3" fill="#FFFFFF" x="0" y="0" width="119.325312" height="208.819297" rx="10"></rect>
<rect fill="#D8D8D8" x="21" y="30" width="78" height="78" rx="9">
<animate
attributeName="y"
values="30;100;100;30;30"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#555555" x="29" y="42" width="24" height="24" rx="9">
<animate
attributeName="y"
values="42;112;112;42;42"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#FC3A5E" x="29" y="72" width="24" height="24" rx="9">
<animate
attributeName="y"
values="72;142;142;72;72"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="x"
values="29;66;66;29;29"
dur="1s"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

119
Resources/simple.svg Normal file
View File

@ -0,0 +1,119 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="316px" height="180px" viewBox="0 0 316 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="screen">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
</clipPath>
<rect id="square" fill="#FC3A5E" x="-8" y="-8" width="16" height="16" rx="5"></rect>
<g id="v1">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
VC 1
</text>
<g transform="translate(0, 21)">
<rect fill="#99A9BA" x="0" y="0" width="64" height="126" rx="11"></rect>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#FC3A5E" x="8" y="39" width="40" height="40" rx="6"></rect>
<rect fill="#555555" x="8" y="19" width="40" height="14" rx="6"></rect>
</g>
</g>
</g>
<g id="v2">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
VC 2
</text>
<g transform="translate(0, 21)">
<rect fill="#99A9BA" x="0" y="0" width="64" height="126" rx="11"></rect>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#FC3A5E" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#555555" x="8" y="9" width="40" height="14" rx="6"></rect>
<rect fill="#FFFFFF" x="6" y="29" width="44" height="90" rx="6"></rect>
</g>
</g>
</g>
<g id="animate">
<text font-family="HelveticaNeue-Light, Helvetica Neue" font-size="14" fill="#000000" x="32" y="6" text-anchor="middle" alignment-baseline="central">
Result
</text>
<g transform="translate(0, 21)">
<rect fill="#0C1E31" x="0" y="0" width="64" height="126" rx="11"></rect>
<circle fill="#FFFFFF" cx="32" cy="118" r="4"></circle>
<g transform="translate(4, 14)" clip-path="url(#screen)">
<rect fill="#FFFFFF" x="0" y="0" width="56" height="98" rx="6"></rect>
<rect fill="#FC3A5E" x="8" y="39" width="40" height="40" rx="6">
<animate
attributeName="x"
values="8;0;0;8;8"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="y"
values="39;0;0;39;39"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="width"
values="40;56;56;40;40"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
<animate
attributeName="height"
values="40;98;98;40;40"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#555555" x="8" y="19" width="40" height="14" rx="6">
<animate
attributeName="y"
values="19;9;9;19;19"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
<rect fill="#FFFFFF" x="8" y="98" width="40" height="80" rx="6">
<animate
attributeName="y"
values="98;29;29;98;98"
dur="2s"
keyTimes="0;0.15;0.5;0.65;1"
calcMode="spline"
keySplines="0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1;0.4,0,0.2,1"
repeatCount="indefinite"
fill="freeze" />
</rect>
</g>
</g>
</g>
</defs>
<g transform="translate(0, 16)">
<use x="0" xlink:href="#v1" />
<use x="84" xlink:href="#v2" />
<use x="252" xlink:href="#animate" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

21
Sources/Extensions/UIView+Hero.swift
View File

@ -28,6 +28,7 @@ public extension UIView {
static var heroModifiers = "heroModifers"
static var heroStoredAlpha = "heroStoredAlpha"
static var heroEnabled = "heroEnabled"
static var heroEnabledForSubviews = "heroEnabledForSubviews"
}
/**
@ -51,6 +52,15 @@ public extension UIView {
set { objc_setAssociatedObject(self, &AssociatedKeys.heroEnabled, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC) }
}
/**
**isHeroEnabledForSubviews** allows to specify whether a view's subviews should be consider for animations.
If true, Hero will search through all the subviews for heroIds and modifiers. Defaults to true
*/
@IBInspectable public var isHeroEnabledForSubviews: Bool {
get { return objc_getAssociatedObject(self, &AssociatedKeys.heroEnabledForSubviews) as? Bool ?? true }
set { objc_setAssociatedObject(self, &AssociatedKeys.heroEnabledForSubviews, newValue, .OBJC_ASSOCIATION_RETAIN_NONATOMIC) }
}
/**
Use **heroModifiers** to specify animations alongside the main transition. Checkout `HeroModifier.swift` for available modifiers.
*/
@ -83,10 +93,15 @@ public extension UIView {
internal var flattenedViewHierarchy: [UIView] {
guard isHeroEnabled else { return [] }
if #available(iOS 9.0, *) {
return isHidden && (superview is UICollectionView || superview is UIStackView || self is UITableViewCell) ? [] : ([self] + subviews.flatMap { $0.flattenedViewHierarchy })
if #available(iOS 9.0, *), isHidden && (superview is UICollectionView || superview is UIStackView || self is UITableViewCell) {
return []
} else if isHidden && (superview is UICollectionView || self is UITableViewCell) {
return []
} else if isHeroEnabledForSubviews {
return [self] + subviews.flatMap { $0.flattenedViewHierarchy }
} else {
return [self]
}
return isHidden && (superview is UICollectionView || self is UITableViewCell) ? [] : ([self] + subviews.flatMap { $0.flattenedViewHierarchy })
}
/// Used for .overFullScreen presentation