Как анимировать внешний файл SVG с помощью Android WebView? - PullRequest
Новая
       7

Как анимировать внешний файл SVG с помощью Android WebView?

0 голосов
/ 09 февраля 2019

Я создал проект Android со следующей настройкой:

test.svg в папке assets 

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
  <style>
    path {
    fill: none;
    stroke: black;
    stroke-width: 3;
    }
  </style>

  <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />

  <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />

  <path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />

  <path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />

  <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />

  <path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
</svg>

animator.html в assets

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
    <object type="image/svg+xml" data="test.svg"></object>

    <p><button class="animate">Animate</button></p>
    <script>
        (function () {
            var button = document.querySelector('.animate');
            button.onclick = function (event) {
                var object = document.querySelector('object');
                var doc = object.contentDocument;
                var paths = doc.querySelectorAll('path');
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    var length = path.getTotalLength();
                    // Clear any previous transition
                    path.style.transition = path.style.WebkitTransition = 'none';
                    // Set up the starting positions
                    path.style.strokeDasharray = length + ' ' + length;
                    path.style.strokeDashoffset = length;
                    // Trigger a layout so styles are calculated & the browser
                    // picks up the starting position before animating
                    path.getBoundingClientRect();
                    // Define our transition
                    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
                    // Go!
                    path.style.strokeDashoffset = '0';
                }
            };
        }());
    </script>
</body>
</html>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="25dp"/>
</android.support.constraint.ConstraintLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity
{

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        //webView.getSettings().setAllowContentAccess(true);
        webView.loadUrl("file:///android_asset/animator.html");
    }
}

Вопрос

Я проверил, но анимация не работает.Однако, если я встраиваю SVG в качестве встроенного элемента, как показано ниже, анимация работает. 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<body>
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
        <style>
    path {
    fill: none;
    stroke: black;
    stroke-width: 3;
    }
  </style>

        <path d="M52.25,14c0.25,2.28-0.52,3.59-1.8,5.62c-5.76,9.14-17.9,27-39.2,39.88" />

        <path d="M54.5,19.25c6.73,7.3,24.09,24.81,32.95,31.91c2.73,2.18,5.61,3.8,9.05,4.59" />

        <path d="M37.36,50.16c1.64,0.34,4.04,0.36,4.98,0.25c6.79-0.79,14.29-1.91,19.66-2.4c1.56-0.14,3.25-0.39,4.66,0" />

        <path d="M23,65.98c2.12,0.52,4.25,0.64,7.01,0.3c13.77-1.71,30.99-3.66,46.35-3.74c3.04-0.02,4.87,0.14,6.4,0.29" />

        <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" />

        <path d="M66.62,77.39c4.52,3.23,11,12.73,13.06,18.82" />
    </svg>
    <p><button class="animate">Animate</button></p>
    <script>
        (function () {
            var button = document.querySelector('.animate');
            button.onclick = function (event) {
                var paths = document.querySelectorAll('path');
                for (var i = 0; i < paths.length; i++) {
                    var path = paths[i];
                    var length = path.getTotalLength();
                    // Clear any previous transition
                    path.style.transition = path.style.WebkitTransition = 'none';
                    // Set up the starting positions
                    path.style.strokeDasharray = length + ' ' + length;
                    path.style.strokeDashoffset = length;
                    // Trigger a layout so styles are calculated & the browser
                    // picks up the starting position before animating
                    path.getBoundingClientRect();
                    // Define our transition
                    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out ' + (2 * i) + 's';
                    // Go!
                    path.style.strokeDashoffset = '0';
                }
            };
        }());
    </script>
</body>
</html>

Поэтому мой вопрос: как анимировать внешний test.svg, а не встраивать его в animator.html?

...