Skip to content

SVG Animation

Weiping Huang edited this page Apr 6, 2017 · 2 revisions

As mentioned in Interface Animation Wiki, any views that implement WoWoAnimationInterface are able to used in WoWoInterfaceAnimation. So I provide an example - WoWoSvgView. WoWoSvgView implements the interface and changes the process of drawing the SVG image in the overridden methods.

WoWoSvgView is modified from jrummyapps/AnimatedSvgView.

After the implementation modification, WoWoViewPager can control the process of drawing the SVGs:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    WoWoSvgView svgView0 = (WoWoSvgView) findViewById(R.id.svg_0);
    WoWoSvgView svgView1 = (WoWoSvgView) findViewById(R.id.svg_1);
    WoWoSvgView svgView2 = (WoWoSvgView) findViewById(R.id.svg_2);
    WoWoSvgView svgView3 = (WoWoSvgView) findViewById(R.id.svg_3);
    WoWoSvgView svgView4 = (WoWoSvgView) findViewById(R.id.svg_4);

    setSvg(svgView0, SVG.GOOGLE);
    setSvg(svgView1, SVG.GITHUB);
    setSvg(svgView2, SVG.TWITTER);
    setSvg(svgView3, SVG.JRUMMY_APPS);
    setSvg(svgView4, SVG.BUSYBOX_LOGO);

    wowo.addAnimation(svgView0)
            .add(WoWoInterfaceAnimation.builder().page(0).implementedBy(svgView0).build())
            .add(WoWoTranslationAnimation.builder().page(1).fromX(0).toX(-screenW).keepY(0).build())
            .add(WoWoAlphaAnimation.builder().page(1).from(1).to(0).build());
    wowo.addAnimation(svgView1)
            .add(WoWoInterfaceAnimation.builder().page(1).implementedBy(svgView1).build())
            .add(WoWoTranslationAnimation.builder().page(2).fromX(0).toX(-screenW).keepY(0).build())
            .add(WoWoAlphaAnimation.builder().page(2).from(1).to(0).build());
    wowo.addAnimation(svgView2)
            .add(WoWoInterfaceAnimation.builder().page(2).implementedBy(svgView2).build())
            .add(WoWoTranslationAnimation.builder().page(3).fromX(0).toX(-screenW).keepY(0).build())
            .add(WoWoAlphaAnimation.builder().page(3).from(1).to(0).build());
    wowo.addAnimation(svgView3)
            .add(WoWoInterfaceAnimation.builder().page(3).implementedBy(svgView3).build())
            .add(WoWoTranslationAnimation.builder().page(4).fromX(0).toX(-screenW).keepY(0).build())
            .add(WoWoAlphaAnimation.builder().page(4).from(1).to(0).build());
    wowo.addAnimation(svgView4)
            .add(WoWoInterfaceAnimation.builder().page(4).implementedBy(svgView4).build());
    wowo.ready();
}

Check the SVG Demo Activity for more details.