can you call Effect.Move and Effect.Appear on the same selector using scriptaculous or will one cancel out the other. If so whats a way around this as one runs slightly before the uder finishes.
use Effect.Parallel
For example:
new Effect.Parallel([
new Effect.Move('element', { sync: true, x: 100, y:300, mode: 'relative' }),
new Effect.Appear('element',{ from: 1.0, to: 0.3 })
], {
duration: 1.0,
delay: 0.5
});
Effect.Parallel
Related
I have a custom view that acts as a progress view, which is basically a simple set of views where I animate the leading constraints of the container that holds the value and of the view that acts as a 'filled' view, so it looks like this:
This is a reusable view and is used in several places in the app. Some of the users suffer a crash that is related to the animation in the update method of this custom view, and I can't reproduce it nor I can find the issue. The method looks like this:
extension GradientProgressView {
/// Animates the progress view to the desired % value and changes the value label
/// - Parameter percentage: the desired % value in range [0.0 - 1.0]
func updateProgress(percentage: Double) {
UIView.animate(withDuration: 0.4, delay: 0, options: .transitionCrossDissolve) {
self.labelProgress.text = "\(Int(percentage * 100))%"
}
// limit to 100% for correct constraint calculation
let percentageAdapted = CGFloat(min(percentage, 1.0))
// the available width for the value container to move left/right
let availableValueContainerWidth = backgroundView.frame.width - labelGradientView.frame.width
labelContainerLeadingConstraint.constant = min(availableValueContainerWidth * percentageAdapted, backgroundView.frame.width - 50)
foregroundLeadingConstraint.constant = labelContainerLeadingConstraint.constant
UIView.animate(withDuration: 0.6, delay: 0, options: .curveEaseOut) {
self.layoutIfNeeded()
}
}
}
More precisely, the crash happens in the animation block of the first UIView.animate call, which corresponds to the line 93 in the stacktrace (see below):
UIView.animate(withDuration: 0.4, delay: 0, options: .transitionCrossDissolve) {
self.labelProgress.text = "\(Int(percentage * 100))%"
}
Here's the stacktrace of the crash:
I've tried using the self as a weak reference in both animation blocks, but the crash reappeared. Could someone point out to me what am I doing wrong here?
It's very tough to debug a crash that can't be reproduced, but a couple comments (that may or may not have anything to do with the crash)...
First, this block:
UIView.animate(withDuration: 0.4, delay: 0, options: .transitionCrossDissolve) {
self.labelProgress.text = "\(Int(percentage * 100))%"
}
doesn't really do anything, other than change the text.
If we want to cross-dissolve the text change in a label, we need to use UIView.transition(...):
UIView.transition(with: self.pctLabel, duration: 0.4, options: .transitionCrossDissolve, animations: {
self.pctLabel.text = "\(Int(percentage * 100))%"
})
Second, you might be running into a problem with your availableValueContainerWidth calculation, as you are allowing the label width to change based on its text. If the current value is only 1-digit, and we change it to 100%, we might get something like this:
Giving the label a fixed width (calculate the width needed for the max value text of "100%"), it can look like this:
Of course, we could use a variable-width label and "get around" the issue by using the center instead of leading ... but the cross-dissolve and width-change animation may also look a little quirky.
Again, really tough to debug a non-reproducible crash, but those two things may be something to look at.
Im developing a React Native app in Expo and I have a custom splash screen animation that I have up initially after the AppLoading splash screen disappears. This works in simulator - the animate out transition is an Animated.timing moving from 1 to 0.
Problem is, on an actual iPhone, theres a split second where the AppLoading disppears and the secondary animated splash screen (an Animated.Image) isn't behind it. Other elements of the app have loaded in that split second though.
This happens even if I take out the "animate out" animation. So my logic is to delay the AppLoading disappearing by 1 second long enough for the secondary splash to be steadily in place.
How can I do this? What is happening here?
EDIT: Only mention of AppLoading is here:
if (!fontsLoaded) {
return <AppLoading />;
} else {
The animated splash screen elements
<Animated.Image pointerEvents={"none"} style={[styles.splash, { opacity: splashOpacity }]} source={require('./assets/splashnew.png')} />
<Animated.Image pointerEvents={"none"} style={[styles.splashTxt, { opacity: splashOpacity, transform: [{scaleY: splashScale }, {scaleX: splashScale }]} ]} source={require('./assets/splash.png')} />
Are controlled by this function:
useEffect(() => {
Animated.sequence([
Animated.delay(1000),
Animated.spring(splashScale, {
toValue: 1,
bounciness: 4,
useNativeDriver: false,
speed: 2
})
]).start()
const interval = setInterval(() => {
Animated.sequence([
Animated.parallel([
Animated.spring(splashScale, {
toValue: 0,
bounciness: 4,
useNativeDriver: false,
speed: 2
}),
Animated.spring(splashOpacity, {
toValue: 0,
bounciness: 2,
useNativeDriver: false,
speed: 3
}),
all you have to do is setup another state variable and use that instead of fontsLoaded.
const [waitOneSecond, setWaitOneSecond] = useState(false);
useEffect(()=>{
if (fontsLoaded) setTimeOut(()=>{setWaitOneSecond(true);},1000);
},[fontsLoaded]);
if (!waitOneSecond) {
return <AppLoading />;
} else {
Here I have some code to show a UIView with a label as a notification.
self.not1cons.constant = 0
self.notificationLbl1.text = self.notification1
UIView.animate(withDuration: 2.5, delay: 0.3, options: .allowAnimatedContent, animations: {
self.view.layoutIfNeeded()
}, completion: { finsihed in
self.not1cons.constant = -100
UIView.animate(withDuration: 2.5, delay: 2.0, options: .allowAnimatedContent, animations: {
self.view.layoutIfNeeded()
}, completion: { finshed in
})
})
It start off-screen and descends in to view. It stays in place for a few seconds and returns to its original position off-screen. I need some code to make these chained animations happen instantly. Is this possible?
You could probably accomplish this by manipulating the CAAnimations the system generates behind the scenes, but that is fairly tricky business, and not a great idea since it relies on undocumented details of the current implemention, which is risky.
Instead I'd suggest reworking your animations to use the new-to-iOS 10
UIViewPropertyAnimator, which has support for pausing and resuming animations, as well as scrubbing them back and forth to arbitrary points.
I have a demo project on Gitub called UIViewPropertyAnimator-test that lets you scrub an animation back and forth using a slider. It is more complex than your need, but it should give you the idea.
I created custom transition, NSZoomTransitionAnimator.
I have a problem that the transition is not working when goingBack in only second time.
For example, I touched a cell (indexPath.row = 0) in collection view. Working correctly in first time , but not working in second time.
I debug code and found sourceImageView.frame is (0.0, 0.0, 360.0, 480.0) in second time.
(0.0, 0.0, 360.0, 480.0) is correct.
Here is my code,NSZoomTransitionAnimator.swift.
UIView.animateWithDuration(kBackwardAnimationDuration, delay: 0, options: .CurveEaseOut, animations: {
sourceImageView.frame = destinationImageViewFrame
println(sourceImageView.frame)//(0.0, 64.0, 187.5, 187.5)
}, completion: {(finished: Bool) in
if finished {
destinationImageView.removeFromSuperview()
println(sourceImageView.frame)//(0.0, 0.0, 360.0, 480.0)
sourceImageView.removeFromSuperview()
}
transitionContext.completeTransition(finished)
})
Here is my repository.
https://github.com/naoyashiga/NSZoomTransitionAnimator
Touch a image in collection view and touch a close button in DetailViewController. So transition will start.
please tell me why transition is not working in only second time.
You can't re-use the sourceViewController.transitionSourceImageView() which has two constraints:
(lldb) po sourceImageView.constraints()
[
<NSContentSizeLayoutConstraint:0x7feaeb7097a0 H:[UIImageView:0x7feaeb577230(360)] Hug:251 CompressionResistance:750>,
<NSContentSizeLayoutConstraint:0x7feaeb704680 V:[UIImageView:0x7feaeb577230(480)] Hug:251 CompressionResistance:750>
]
So its size will be incorrect. Instead, you can change
sourceImageView = sourceViewController.transitionSourceImageView()
to
sourceImageView.image = sourceViewController.transitionSourceImageView().image
sourceImageView.frame = sourceViewController.transitionSourceImageView().frame
This will solve your problem.
Is there a way to slide and fade at the same time in Scriptaculous. In Jquery you can use animate but not sure how with Scriptaculous to animate multiple properties on one element.
Do you mean slideUP()?
You can use Effect.Parallel():
new Effect.Parallel([
new Effect.SlideUp(element, { sync: true, x: 20, y: -30, mode: 'relative' }),
new Effect.Fade(element, { sync: true, from: 1, to: 0 })
], {
duration: 0.8,
delay: 0.5
});