Der einfachste Weg, eine Form mit Berührung in React Native zu verfolgen?

8

Ich versuche, einen Bestätigungsbildschirm für meine native React-App zu erstellen, und der Benutzer muss eine Ellipse verfolgen, um ihre Aktion zu bestätigen - ähnlich wie das Hotel heute Abend mit seinem Logo. Gibt es eine Bibliothek, mit der der Benutzer eine SVG-Datei verfolgen kann?

Hier ist ein Beispiel dafür, was der Benutzer tun würde:

react-native svg touch Looneydoodle
quelle

Antworten:

3

Ich fand jemand anderes zu tun versuchen diese , ich glaube nicht , dass der meist kreative Ansatz ist, gibt es eine Möglichkeit , dies vor vielen Jahren in Flash zu tun.

Ich weiß, dass SVG für Strichzeichnungen verwendet wird. Es gibt viele Tutorials:

https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f

Es gibt auch eine Bibliothek für SVG namens react-native-svg . SVG-Objekte können in Javascript gezogen werden

http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/

Meine Idee, dies zu lösen, wäre folgende: Sie haben zwei Schichten übereinander.

Das obere füllt den gesamten Bildschirm aus und hat einen Schnitt, dh die Form, die verfolgt werden soll (die Strichzeichnungen).

Um zu dem SVG-Objekt zu gelangen, das sich dahinter befindet, können Sie dies nur durch diesen Schnitt tun. Sie können einen kleinen Kreis am Startpunkt anzeigen, der Teil einer großen SVG-farbigen Form ist, die sich unter dem Schnitt befindet. Diese Form ist die zweite Ebene.

Der Benutzer würde mit der Verfolgung beginnen, aber was er wirklich tut, ist das Ziehen dieses großen SVG-Objekts von einem Punkt zum nächsten. Er muss dem Pfad wie die Verfolgung folgen, da er das Objekt nur dann durch das Loch ziehen kann, wenn er dies tut. (Er kann das Objekt in der zweiten Schicht nur durch das Loch erreichen)

Das zu ziehende SVG-Objekt hat eine andere Farbe als die oberste Ebene. Wenn der Benutzer es zieht, sieht es so aus, als würde sich der Pfad füllen.

Ich hoffe das hilft dir oder gibt dir zumindest ein paar Ideen. Sie können auch eine andere SVG-Datei animieren, wenn der Benutzer die Ablaufverfolgung mit einer CSS-Strichzeichnungen-Animation abgeschlossen hat. Ich würde es wahrscheinlich versuchen, wenn ich Zeit habe.

Federico Sananes
quelle
0

Ich bin auf eine ähnliche Situation gestoßen, in der ich React-Native-Sketch-Canvas verwendet habe

Ich habe den Benutzer auf die Leinwand zeichnen lassen und den Ausgabepfad mit einem vordefinierten Pfad verglichen. Es war keine perfekte Lösung, aber gut genug für meine Anforderungen.

Firoz Ahmed
quelle
0

Wenn wir über die Arbeit an SVGs sprechen, ist die erste Bibliothek, die mir in den Sinn kommt, die D3 Js. In d3 können Sie dem Pfad einer beliebigen Form im SVG folgen und eine Interpolation erstellen. Ein solches Beispiel ist unten angegeben Dies kann Ihnen in jeder Hinsicht helfen.

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>

<div id="loader_container"></div>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

function loader(config) {
  return function() {
    var radius = Math.min(config.width, config.height) / 2;
    var tau = 2 * Math.PI;

    var arc = d3.svg.arc()
            .innerRadius(radius*0.5)
            .outerRadius(radius*0.9)
            .startAngle(0);

    var svg = d3.select(config.container).append("svg")
        .attr("id", config.id)
        .attr("width", config.width)
        .attr("height", config.height)
      .append("g")
        .attr("transform", "translate(" + config.width / 2 + "," + config.height / 2 + ")")

    var background = svg.append("path")
            .datum({endAngle: 0.33*tau})
            .style("fill", "#4D4D4D")
            .attr("d", arc)
            .call(spin, 1500)

    function spin(selection, duration) {
        selection.transition()
            .ease("linear")
            .duration(duration)
            .attrTween("transform", function() {
                return d3.interpolateString("rotate(0)", "rotate(360)");
            });

        setTimeout(function() { spin(selection, duration); }, duration);
    }

    function transitionFunction(path) {
        path.transition()
            .duration(7500)
            .attrTween("stroke-dasharray", tweenDash)
            .each("end", function() { d3.select(this).call(transition); });
    }

  };
}


var myLoader = loader({width: 960, height: 500, container: "#loader_container", id: "loader"});
myLoader();

</script>

</body>
</html>

Quelle: http://bl.ocks.org/MattWoelk/6132258

Sie können die Interpolation mit beliebigen Typen, Zeichenfolgen und Datumsangaben optimieren. Für die Interpolation kann der folgende Link helfen

https://bl.ocks.org/mbostock/3173784

http://jsfiddle.net/SHF2M/

https://codepen.io/frcodecamp/pen/wxXypx

Erstellen Sie die äußere SVG-Form als zwei Ellipsen, die auf beiden Seiten durch eine Linie verbunden sind. Anschließend können Sie den Ellipsenpfad verwenden, um mithilfe von Drehpositionen zu interpolieren. Die Drehposition sollte vom Fortschritt im Bestätigungsbildschirm abhängen.

redhatvicky
quelle