Tôi đang cố gắng thực hiện màn hình xác nhận trên ứng dụng gốc phản ứng của mình và tôi cần người dùng theo dõi hình elip để xác nhận hành động của họ - giống như những gì khách sạn tối nay làm với logo của họ. Có thư viện nào tôi có thể sử dụng để theo dõi người dùng không?
Dưới đây là một ví dụ về những gì người dùng sẽ làm:
Câu trả lời:
Tôi đã tìm thấy một người khác đang cố gắng làm điều này , tôi không nghĩ rằng đó là cách tiếp cận sáng tạo nhất, có một cách để làm điều này trong flash nhiều năm trước.
Tôi biết rằng SVG đang được sử dụng cho hoạt hình nghệ thuật trực tuyến, có rất nhiều hướng dẫn trên mạng:
https://medium.com/@sterling.meghan/svg-line-animation-for-beginners-51857c88357f
Ngoài ra, có một thư viện cho SVG được gọi là Reac -igen-svg , điều là các đối tượng SVG có thể được kéo trong javascript
http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
Vì vậy, ý tưởng của tôi để giải quyết điều này sẽ là thế này: Bạn có hai lớp chồng lên nhau.
Cái trên cùng lấp đầy toàn bộ màn hình và có một vết cắt, đó là hình dạng được vạch ra (nghệ thuật đường nét)
Để đến được đối tượng SVG phía sau, bạn chỉ có thể thực hiện thông qua phần cắt này. Bạn có thể hiển thị một vòng tròn nhỏ trên điểm bắt đầu là một phần của hình dạng màu SVG lớn nằm dưới vết cắt, hình dạng này là lớp thứ hai.
Người dùng sẽ bắt đầu lần theo dấu vết nhưng những gì anh ta thực sự đang làm là kéo vật thể lớn SVG đó từ điểm này sang điểm khác, anh ta cần đi theo con đường như truy tìm bởi vì chỉ khi anh ta làm điều này, anh ta mới có thể kéo đối tượng qua lỗ. (Anh ta chỉ có thể tiếp cận đối tượng trong lớp thứ hai thông qua lỗ)
Đối tượng SVG đang được kéo có màu khác với lớp trên cùng, vì vậy khi người dùng kéo, nó sẽ xuất hiện đường dẫn lấp đầy.
Tôi hy vọng điều này sẽ giúp bạn hoặc ít nhất là cung cấp cho bạn một số ý tưởng. Ngoài ra, bạn có thể làm động một SVG khác khi người dùng hoàn thành theo dõi, với hoạt hình nghệ thuật dòng CSS. Tôi có thể sẽ thử điều này khi tôi có thời gian.
Tôi đã gặp một tình huống tương tự trong đó tôi đã kết thúc bằng cách sử dụng Reac -igen-sketch-canvas
Tôi đã làm cho người dùng vẽ trên khung vẽ & so sánh đường dẫn đầu ra với một đường dẫn được xác định trước. Đó không phải là một giải pháp hoàn hảo nhưng đủ tốt cho yêu cầu của tôi.
Để nhận biết, bạn có thể sử dụng rn-cử chỉ nhận dạng được xây dựng từ gói rn-draw: https://www.npmjs.com/package/rn-gesture-recognizer
( https://www.npmjs.com/package/rn-draw )
Và sau đó, bạn có thể tạo hình dạng css hoàn hảo của bạn trên svg của bạn: https : // coding Daily.io/tutorials/22/The-Shapes-of-React-Native
Ngoài ra, bạn có thể làm những việc khác như thế: https : //coding Daily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native
Nói chung khi chúng ta nói về việc làm việc trên SVG, thư viện đầu tiên xuất hiện trong đầu tôi là D3 Js, trong d3 bạn có thể đi theo đường dẫn của bất kỳ hình dạng nào trong svg và chúng ta có thể tạo phép nội suy, Một ví dụ như vậy được nêu dưới đây, Xem qua nếu điều này có thể giúp bạn trong bất kỳ cách nào.
<!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>Nguồn: http://bl.ocks.org/MattWoelk/6132258
Bạn có thể điều chỉnh phép nội suy với bất kỳ loại, Chuỗi, ngày nào. Đối với Nội suy, liên kết dưới đây có thể giúp
https://bl.ocks.org/mbostock/3173784
https://codepen.io/frcodecamp/pen/wxXypx
Xây dựng hình dạng svg bên ngoài như hai hình elip được nối với nhau ở hai bên, sau đó chúng ta có thể sử dụng đường dẫn hình elip để nội suy bằng các vị trí xoay, Vị trí xoay phải phụ thuộc vào tiến trình trong màn hình xác nhận.