How can different animations can be attached to an image dynamically in react-native? - react-native

Asume there is an image on the screen and when a user presses another image (say right arrow) the first image goes right and when the user presses a third image (say left arrow) the first image goes left.
Briefly something like this, the left arrow should move the stickman to the left and the right should move to the right:
According to the documentation, an image can have multiple animations (transforms, scales, opacity changes etc) but it seems all those animations need to be run parallel (simultaneously).
My question is about doing this with a function call freely from unrelated objects.

You can just have an animation value for how much you want to move the stick man. Just give the stick man a
style={{transform:[{translateX: this.stickManTranslateX}]}} then you can just have the arrows use the moveStickManLeft function for it to move in different directions.
stickManTranslateX = new Animated.value(0);
moveStickManLeft = toValue => {
this.stickManTranslateX.setValue(toValue);
}

Related

How to build below screen in titanium?

below i attached an app help guide screen. I am understanding how to build this screen.
If any body have idea please share here
View with semi transparent background color (backgroundColor:"rgba(0,0,0,0.5)";) and some images on top of it.
So, using images is bad. You'll need images for translations and if you do this as one image you'll need to ensure all devices are covered so your arrows point to the right element.
Minimise images == smaller app.
First thing you'll need to do is a create a blocker view -- so that's a view that will fill the screen and have a black background with opacity.
You can't apply that to the window as everything in it will be semi-transparent so:
Create a transparent Window that fills the screen.
Add to that window a view that fills the window and has opacity say 0.5 and black background
Add to the Window (not the view you just created) the other elements and button -- ideally, these should be individual graphics of the arrows, sized in such a way that you can position them based on the host element (the item they are pointing to / referring to). Use real text so you can handle translations / reduce file size.
So you'll need a way to associate each tip with a control they are anchored too, and that will ensure that regardless of the screen size, the tip will appear in the correct place.
First of all, always give a try before putting questions anywhere because it makes you learn things on your own for long time.
The easiest step for you to do this is to ask your designer to create a complete image just like that & you just have to show it on top.
If you have to show that image in different translations, then you can ask your designer to provide you required translations images.

iOS horizontal swipe room selection

I am making an iOS app for remote controlling the lights in my house. I have a list of groups of bulbs (rooms) that can be turned on and off. My problem is selecting a room, I want it to be like this:
You can either press the arrows left or right to switch the room, or you can put your finger, where it says Living Room and swipe left or right to switch it.
Can someone give me a pointer as how to implement a swipe feature like that? I know there are gesture recognizers. I never used them, but I guess they won't automatically make the text I want to swipe follow my finger.
I guess it would be possible to use the gesture recognizer and manually move the text to get the swipe "feeling". It just seems to me like there should be an easier solution.
I've done something similar several times, and the most elementary way to approach it is to override the touches... methods on NSResponder. This will tell you when a user's finger touches the component, when it moves, and when they let go. From that, it's pretty easy to adjust the position of your UIView, do some custom rendering, or whatever else you need.
Another, higher-level, approach is to use a UIScrollView and implement it's delegate methods. Inside the scroll view are three elements which completely fill the viewport: the one you can see, and those to the left and right. You watch the delegate events for the user adjusting the position of the viewport and as they expose an element to the left or right, you can snap the viewport into place when they let go. Then, you adjust the three inner views to show the appropriate new content and reset the viewport to expose the middle element (which would then be showing the appropriate content).
There are undoubtedly many other approaches, but I've used both of these with good effect.
I solved it in the end by using a pangesturerecgonizer attached to the label. It's pretty straight forward, I just didn't know pan is supposed to mean something like drag and drop, I thought pan would be something completely different.

Move Insertion point of an NSTextView and make the written content visible

I am working on one Mac app. In which I want to play few tricks with insertion point of an NSTextView.
![NSTextView with overlay on it][2]
What am I doing is, I have an NSTextView (The whole image screen is of NSTextView) and above that I have placed one overlay (as you can see at the bottom of the image). There are two Labels at the extreme Left and Right end and has a white gradient view too. All these three I have placed above NSTextView.
Now when User types in, textview gets scrolled and at one point, typed letters goes below the overlay.
I have to manage this stuff only. I want to keep track that user has reached to the overlay border and if yes, I want to move the insertion point to little upside so that user can see the content which he/she is writing.
Will anyone suggest me, how to make this possible ?
I have tried many things, but its not working. Kindly help.

How to create an "Add to reading list" animation effect

I'm trying to make an animation effect similar to the one on Safari(iPhone) when you add an element to the reading list. It's similar to the one that appears when starting to download an item from App Store application: the application item drops to the dock to start downloading.
First it bounces up and then goes to the dock. It's a very nice effect that Apple uses on their OS.
I have an image view on screen that I want to drop with this kind of animation to my toolbar in my application.
If there is someone who did it or know what's the name of the effect, could please tell me how to do it.
Thank you.
"Add to reading list" shows no animation on my phone but of your description it sounds like the "Open in background"-animation in Safari (iPhone). My answer describes that animation.
I wrote a thing like that a few months ago and much of it is doable while some of it is not. Your questions showed me that more people are to know how it is done so I wrote a blog post about it. I will describe the high level approach and challenges here but you can read more about it in that post.
Getting to content to animate
If you choose to animate the view that is on screen down to the (in your case) tool bar then you will only have to access its layer. If you want the original view to remain and animate a visual copy (like the "open in background"-Safari animation) down to the bar item then you should create a new layer and draw the content of your layer into an image and set that image as the content of the layer that you are animating
Calculating the end position
The start position of the animation is simply the frame of the view. The end position is very tricky since bar items (both tool bar items and tab bar items) are not UIView subclasses and doesn't have a public view property. This causes problems when you want to shake the bar item later on.
I decided to make a visual approximation of the end position using some simple heuristics. If you know before hand that you will only animate to a single bar item then the end position can be hard coded to a suitable frame.
Animating along a path
There is nothing special to moving, scaling and rotating the layer from the start to the end position. If you want to read more about how I did it you can look at the post I wrote.
Shaking the bar item
This cannot be done without a lot of custom code or using private API at the moment. Since bar items doesn't have a view or a layer there is no accessible layer for you to animate. I guess that you could have a custom animating image that does the shake and set that during the animation and set the new image afterwards. The approach of drawing into an image and animating that doesn't work that well either since there is no accessible layer who can draw its content into the image (you want this for the special effect of the tool bar item and tab bar item).
...put all this together and tweak it to your special needs and you will have an animation that resembles the animation you are looking for.

New To Android Animation

I have three images which I want to move the images from one end to the other. When the first image goes beyond the window, it should start from the left side. It should run based on a timer.
What type of animation will be a perfect choice for this situation?
If each image is in an ImageView, you can use a TranslateImage on each one that is set to repeat infinitely (setRepeatCount(Animation.INFINITE), setRepeatMode(Animation.RESTART)).