Databases
StackOverflow2013
Postsdbo
POQt animation - Simultaneously change scale and position using QPropertyAnimation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POQt animation - Simultaneously change scale and position using QPropertyAnimation
    text
    copied!<p>I'm currently trying to build a slideshow viewer with Qt with the help of the QAnimation framework. I'm having trouble changing the size of a photo while simultaneously moving it as changing the size of a photo in the slideshow while it is moving seems to affect its trajectory. </p> <p>Specifically, I'm trying to animate a set of photos, making them move continuously from right to left across the horizontal center line of the window while changing in size at the same time. Basically, its sort of a "fish-eye" effect, with the photo becoming larger as it moves towards the center of the window then decrease back to its original size as it moves away.</p> <p>At any given time, the window will only show 3 photos (plus 1 photo exiting the window on the left). Suppose the 3 photos, ordered from left to right, are labeled P1, P2, P3. Consider one photo, the right-most photo P3. As P3 moves from the right of the window towards the center, its size should gradually increase and hit a maximum size at the center of the window. As it continues to move towards the left and eventually exit the window, its size should decrease back to its original value. </p> <p>My current implementation works if I'm just moving the photos without resizing them. When simultaneously moving and scaling the image, the photos are no longer moving horizontally across the center of the window. The size of the photos appears to be scaled correctly.</p> <p>My current implementation relies on the QPropertyAnimation class to perform the animation. I'm writing my program using Python and Qt's PySide bindings, but solutions in C++ or PyQt code are fine. I will just translate them to Python and PySide. </p> <p>The relevant code are as follows:</p> <pre><code>def animate(self, items): '''@params: items The photos to animate''' logging.debug('Creating %d animation objects', len(items)) self.animationGroup.clear() for i, item in enumerate(items): self.animatePosition(item, i, len(items)) self.animateScale(item, i) QTimer.singleShot(START_DELAY, self.animationGroup.start) def animatePosition(self, item, index, numItems): isLastItem = (index == numItems - 1) isFirstItem = (index == 0) posAnimation = QPropertyAnimation(item, 'position') posAnimation.setDuration(SLIDE_INTERVAL) posAnimation.setStartValue(item.pos()) # I've tried changing dh depending on the scale of the current image with limited success. dh = 0 if isLastItem: posAnimation.setEndValue(item.pos() - QPointF(slideshow.RIGHT_MARGIN + slideshow.STANDARD_SLIDE_WIDTH, dh)) elif isFirstItem: posAnimation.setEndValue(item.pos() - QPointF(slideshow.LEFT_MARGIN + slideshow.STANDARD_SLIDE_WIDTH, dh)) else: posAnimation.setEndValue(item.pos() - QPointF(slideshow.IMAGE_GAP + slideshow.STANDARD_SLIDE_WIDTH, dh)) posAnimation.setEasingCurve(QEasingCurve.OutExpo) self.animationGroup.addAnimation(posAnimation) def animateScale(self, item, index): if self.animatedView is not None: scaleAnimation = QPropertyAnimation(item, 'slideScale') scaleAnimation.setDuration(SLIDE_INTERVAL) scaleAnimation.setStartValue(item.scale()) endScale = self.getSlideScale(index - 1) scaleAnimation.setEndValue(endScale) scaleAnimation.setEasingCurve(QEasingCurve.OutExpo) self.animationGroup.addAnimation(scaleAnimation) </code></pre> <p>I know that typically the photo has to be moved back to the origin before applying the scaling transformation, then moved back to the next position on its trajectory. I suspect that the QPropertyAnimation for scaling of the photo is being applied to the translated photo and hence affecting its trajectory, but I could be wrong as I only just started using Qt for the past 1-2 weeks.</p> <p>Does anyone know how I can make a QPropertyAnimation aware of another animation taking place? Or can anyone suggest a different approach (no necessarily involving QPropertyAnimation) for solving the above problem?</p> <p>Thanks in advance to any replies.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload