I am trying to do a confirmation screen on my react native app and I need the user to trace an ellipse in order to confirm their action - kinda like what hotel tonight does with their logo. Is there a library I can use to have the user trace over an svg?
Here is an example of what the user would be doing:
I found someone else trying to do this, I don't think that is the most creative approach, there was a way to do this in flash many years ago.
I know that SVG is being used for line art animation there are many tutorials out there:
https://medium.com/#sterling.meghan/svg-line-animation-for-beginners-51857c88357f
Also, there is a library for SVG called react-native-svg, the thing is SVG objects can be dragged in javascript
http://www.petercollingridge.co.uk/tutorials/svg/interactive/dragging/
So my idea to solve this would be this:
You have two layers one on top of each other.
The top one fills the entire screen and has a cut, that is the shape to be traced (the line art)
To get to the SVG object that is behind you can only do it through this cut. You can show a small circle on the starting point that is part of a big SVG colored shape that is under the cut, this shape is the second layer.
The user would start tracing but what he really is doing is dragging that SVG big object from one point to the next, he needs to follow the path like tracing because only if he does this he can drag the object through the hole. (He can only reach the object in the second layer through the hole)
The SVG object being drag has a different color from the top layer so when the user drags it gives the appearance of the path filling up.
I hope this helps you or at least gives you some ideas. Also, you could animate another SVG when the user completes the trace, with CSS line art animation. I would probably try this when I have the time.
I came across a similar situation in which I ended up using react-native-sketch-canvas
I made the user draw on the canvas & compared the output path with a predefined path. It was not a perfect solution but was good enough for my requirements.
For recognition you can use rn-gesture-recognizer built off of the rn-draw package :
https://www.npmjs.com/package/rn-gesture-recognizer
(https://www.npmjs.com/package/rn-draw)
And then you can for example create your perfect css shape over your svg :
https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
Also, you can do other things like that :
https://codedaily.io/tutorials/55/Create-a-Draggable-Opacity-Changing-Circle-with-Reanimated-in-React-Native
Generally when we talk about working on SVG's the first library that comes to my mind is the D3 Js , in d3 you can follow the path of any shape in the svg and we can create interpolation , One such example is stated below , See through if this can help you in any ways.
<!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>
Source :
http://bl.ocks.org/MattWoelk/6132258
You can tweak the interpolation with any types , String , date anything. For Interpolation the below link can help
https://bl.ocks.org/mbostock/3173784
http://jsfiddle.net/SHF2M/
https://codepen.io/frcodecamp/pen/wxXypx
Build the outer svg shape as two ellipses connected by line on either sides , then we can use the ellipse path to interpolate using rotate positions , The rotate position should depend on the progress in confirmation screen.
Related
Is there a code sample available that illustrates how to use a 2D transform (such as rotate and scale) with a JPG in a react-native application, perhaps with the code in the tutorial as a starting point?
If possible, it would be helpful to see code for two scenarios:
1) automatically apply a transform when the app is launched
2) apply a transform after different types of user gestures
At some point in the future it would be interesting to see how to create 3D transforms and animation effects.
Update: You can see the entire example in my sample app here: https://github.com/grgur/react-native-memory-game
Animation is now AnimationExperimental so we'll need to modify zvona's solution.
First, make sure RCTAnimationExperimental is a linked library
If not, then follow these steps:
Navigate to node_modules/react-native/Libraries/Animation/
Drag and drop RCTAnimationExperimental.xcodeproj to Libraries (should look like the image above)
Click on your project name (in the example above, my project name is Memory)
Switch to the Build Phases tab
Expand Libraries/RCTAnimationExperimental.xcodeproj/Products
Drag libRctAnimationExperimental.a to Link Binary With Libraries
Ok, the hardest part is now over. Head over to your JavaScript file. Animation is no longer part of the react-native package so we have to include it explicitly.
var React = require('react-native');
var AnimationExperimental = require('AnimationExperimental');
Alright, champ, you're ready to animate. Make sure you know what you're animating. The view you will be animating is referred to as node.
AnimationExperimental.startAnimation({
node: this.refs.image,
duration: 400,
easing: 'easeInQuad',
property: 'opacity',
toValue: 0.1,
});
And that's it!
At the moment of writing, available properties are: opacity, position, positionX, positionY, rotation, scaleXY
Currently, this is a bit more complex process and I'm planning to write a blog post about that. However, as a brief starter, I write something here.
First problem is that RCTAnimation / RCTAnimationManager is not present at all, if you've created your project with react-native init [ProjectName] (https://github.com/facebook/react-native/issues/226).
You need to add it in XCode from a plus sign in top left corner: "Add Files to [ProjectName]". Then you navigate to node_modules > Libraries > Animation > RCTAnimation.xcodeproj. After it's imported, you need to drag it under Libraries in your project.
Then you need to open tab Build Phases. There you have menu Link Binary With Libraries (x items). Drag from Products under RCTAnimation.xcodeproj file named libRCTAnimation.a to the menu.
Now, you can build your project to support animations. I'm not that familiar with XCode, so there could be a even more simple way of achieving this, but I got it sorted like this.
Second Problem is that not all the available (or planned) functionality is there. At least I ran through the jungle of trials and errors before I got anything on the screen.
Try e.g. this code at first to get fully proofed that animations are working:
var {
Animation,
AppRegistry,
StyleSheet,
Text,
View
} = React;
var styles = StyleSheet.create({
test: {
width: 400,
height: 400,
backgroundColor: 'blue',
opacity: 0
}
});
var AnimationTest = React.createClass({
componentDidMount () {
Animation.startAnimation(this.refs['this'], 400, 0, 'linear', {opacity: 1});
},
render () {
return (
<View ref='this' style={styles.test}>
<Text>Just an animation test</Text>
</View>
)
}
});
AppRegistry.registerComponent('AnimationTest', () => AnimationTest);
This should get you going. If you need any further assistance, please notify me.
If I ever succeed in writing a more complete instructions in a form of a blog article, I'll update it to this answer.
Check out the 2048 demo application for example usage of the RCTAnimation library:
https://github.com/facebook/react-native/tree/master/Examples/2048
It doesn't use any especially complex transforms, but does animate position, opacity, and scaleXY of various elements with code that looks like this:
Animation.startAnimation(this.refs['this'], 300, 0, 'easeInOutQuad', {scaleXY: [1, 1]});
I'm trying to create functionality very similar to most websites these days.
The concept is 3 sections the size of the browser, the background images are supposed to be fixed positioned and revealed by the div scrolling up and down.
We need this to function as beautifully on mobile as it does on desktop, and it looks like Famous/angular is the solution.
Here is a pen.
http://codepen.io/LAzzam2/pen/XJrwbo
I'm using famous' Scroll.sync, firing javascript that positions the background image on every start / update / end.
scrollObject.sync.on("update", function (event) {
console.log('update');
test(event);
});
here is the function positioning the backgrounds.
function test(data){
var scroller = document.getElementsByClassName('famous-group');
styles = window.getComputedStyle(scroller[0], null);
tr = styles.getPropertyValue("-webkit-transform").replace('matrix(1, 0, 0, 1, 0,','').replace(')','');
var distanceTop = -(parseInt(tr));
var sections = document.getElementsByClassName('section');
sections[3].style.backgroundPosition="50% "+distanceTop+"px";
sections[4].style.backgroundPosition="50% "+(-(window.innerHeight)+distanceTop)+"px";
sections[5].style.backgroundPosition="50% "+(-(window.innerHeight*2)+distanceTop)+"px";
};
Any input / suggestions / advice would be wonderful, really just looking for a proof of concept with these 3 background images scrolling nicely.
That jittery-ness is unfortunate, I can't tell what would be causing the issue, except maybe the order in which events are fired?
**There are known issues, only works in -webkit browsers as of now
I think your idea to use Famous is good, but probably what I would do, would be taking a different approach to the problem.
You are solving this by touching the DOM, that is exactly what both Angular and Famous are meant to avoid.
If I had to face the same goal, I would probably use a Famous surface for the background instead of changing the property of the main one and synchronize its position with the scrolling view.
So, in your code, it would be something like this:
function test(data){
var scrollViewPosition = scrollObject.getAbsolutePosition();
var newBackgroundPosition = // Calculate the new background position
var newForegroundPosition = // Calculate the new foreground position
var backgroundSurface = backgroundSurface.position.set(newBackgroundPosition);
var foregroundSurface = foregroundSurface.position.set(newForegroundPosition);
};
I have a responsive layout and I am using sticky.js for my header. This seems to be working minus a few glitches that I can live with. But my anchors are always off (I am using smooth scrolling). I am not sure how to compensate for the sticky header when scrolling to an anchor when the responsive layout is constantly changing the width and height?
Unfortunately there is not a whole lot you can do with straight-CSS which won't distort your design. To tackle this issue in previous projects, I have used jQuery to handle these types of scrolling/anchor issues.
What You Have Now: <a> tags that look for id's on the page. The problem is this: when the site goes responsive, those anchor tags don't line up so nicely with your DOM layout.
My Solution: To give you the high level concept - I used jQuery to modify the ID positions on the fly. Say you click on a link when the site is full-size, and everything is fine. jQuery is not needed here. Now say that when you click that same link when the site was scaled to about the 768px-width range (iPad portrait): then my anchors might look as if they were about 100px off (for example). I wrote a bit of jQuery to handle this: "If the width is __, then offset the anchor ID's by ___px."
I would recommend using JS to account for the difference at time-of-scroll, rather than trying to artificially alter the height property of your anchor tags. Here's a function that might work for you, using pure JS:
adjustScroll = function () {
// Sticky nav selector (you'll have to provide your own selector)
const nav = document.querySelector('header>nav');
if (location.href.indexOf("#") >= 0) {
// Find the name of the anchor
let n = location.href.substr(location.href.indexOf("#")+1);
// Find the anchor by name, if it exists
let a = document.querySelector('a[name="'+n+'"]');
if (!a) {
return;
}
// Set y value as y-value of the anchor, offset by the header height
let y = a.offsetTop;
y -= nav.height + 10;
// Scroll to the y position
window.scrollTo(0, y);
}
}
// Call it wherever you need to call it
adjustScroll();
Examples of where to call it might be on a DOMContentLoaded event, or on an onclick event for anchor tags.
I'm using the supersized jquery plugin in order to display a fullscreen background slideshow.
Look at this website (it's not my own but I'm using the same structure):
http://mysampleconcept.com/situs4/
As you can see (for example if you give the header some opacity) the images begin at the top of the body.
But I want them to begin below the header (so that the header doesn't cover the top of the image).
If you give the supersized LIs for example top: 100px; the whole image moves down so that the bottom of the image disappears below my footer.
So that's not the solution I want.
So all in all which I need is the image to stretch to the biggest size it can, while still being inside the window not stretching over the top 100px nor bottom.
How can I do this?
Sorry, my English is not the best...
I found this solution but I don't know how to implement it: https://stackoverflow.com/a/12889088/1981981
You can use the solution offered in the question you refered to as a starting point. Just place it right below the $.supersized() inside your document ready function.
Since you want a top offset, we have to modify the top value aswell. I modified the snipped to suit your needs:
var portfolioSize = function() {
var headerOffset = 100;
$('#supersized').css({
height: $(window).height() - headerOffset,
top: headerOffset + 'px'
});
};
portfolioSize();
$(window).resize(function() { portfolioSize(); });
I changed the $(window).load Event to a direct call, since we place the code inside the document ready function.
Don't forget to modify the CSS for positioning as mentioned in the other answer (https://stackoverflow.com/a/12889088/860205).
I have a gadget that is a glossary with a number of different pages. users can upload new words to the data source and those words will be pulled into the glossary through an AJAX call.
I want to resize the gadget window everytime the window is re-sized OR a new letter is selected and the page height changes (ie the gadget html block height).
Google developers has posted this on their website. However, this clearly is not working for me. The scrolling is not registering on the iframe and the height is not adjusting when the window is resized.
Here are my ModulePrefs
title="Climate Policy and Science Glossary"
description="Paragraph format"
height="300"
scrolling="true">
<Require feature="dynamic-height"/>
<Require feature="opensocial-0.8" />
Here is the gadget's script telling it to adjust:
window.onresize = adjust;
function adjust() {
var wndwH = gadgets.window.getViewportDimensions().height,
wgtH = $('#_glossary').closest('html').height,
h = Math.min(wndwH, wgtH);
gadgets.window.adjustHeight(h);
}
gadgets.util.registerOnLoadHandler(adjust);
What's going on? Am I doing something wrong or is there anyone else out there having trouble with Google's dynamic height??
The adjust function really only needs:
function adjust() {
gadgets.window.adjustHeight();
}
That should fit everything automatically.