TouchEvent | 关于Touch事件的几个模拟示例.如果对分发机制不是很了解的 , 又没有太多时间模拟实验的 , 可以参考 | Camera library

The problem is that you re-create and re-assign the video composition to the player item every time the slider value changes. This is very costly and unnecessary. You can do the following instead:

• Create the filter somewhere outside the composition block and keep a reference to it, for instance in a property.
• Also, create the composition only once and let it apply the referenced filter (instead of creating a new one with every frame).
• When the slider value changes, only set the corresponding parameter value of the filter. The next time the composition will render a frame, it will automatically use the new parameter value because it uses a reference to the just-changed filter.

Something like this:

The problem was iOS 12.5 didn't support my code. Had to change in and used #checkbox: checked. The rest of the code in JavaScript works. Thank you for your carelessness! I learned a lot from this

For anyone else facing this problem, the trick was to do the event dispatching manually.

Button1 returns true from the OnTouchEvent if action = ACTION_DOWN. When it is ACTION_MOVE, then return false.

ButtonContainer returns true on onInterceptTouchEvent when action is ACTION_MOVE and then calls the dispatchTouchEvent of BitContainer, which calls dispatchTouchEvent on all t's child views using a for loop

From there, you can now write a method in each of your child views to check if the x position of the touchevent is within their own getLocationOnScreen() coordinates.

Here is the onInterceptTouch event on ButtonContainer, and dispatchTouchEvent on BitContainer as an example:

Button Container

You do not zoom towards the mouse on the right either; in fact, if you put your mouse in the top-left corner you zoom in to the center of the image. Besides that I can at least identify that this.zoomPointX = Math.min(Math.max(left, -leftOffset), 0); only allows your translate to go left, and thus only allow zooming towards the right of the center line.

Let's start with taking a step back and figuring out what we are doing here. The final styling is a translate, followed by a scale. The scale happens around the center of what you are seeing on screen right then, and the translate that happens before that is meant to move the image so the point around which you want to zoom is in the middle.

To properly debug this we need a better understanding of what the code is doing, so I first added some debug markers and disabled the zoom styling, so we can visualise what is happening without it zooming all over the place.

OK - a bit of playing around...

Looks like you need to flip the animations, since they're effectively "going backward."

I managed to remove the glitch for resumeLayerBackwards(layer:) in the sample project. Two problems there in fact:

1. there is an empty screen after animation has visually finished
2. the empty screen is visible for 1 - .timeOffset seconds

So, seems like the problem is that animation in fact plays not just for .timeOffset period, but for the whole .duration period. And the empty screen appears because there is no animation defined for 1 - .timeOffset block.

Just to recall: CALayer also adopts CAMediaTiming protocol, as CAAnimation does (with all the properties defined: although some of them seem not be very clear how to be applied to a layer).

With speed = -1 after .timeOffset seconds passed — the property .timeOffset becomes equal to zero. It means that animation has reached its beginning and therefore (with negative speed) it is finished. Though it is not that obvious — seems like it is removed because of the .fillMode property. To fix this I've added perspectiveLayer.fillMode = .forwards to animate() method.

To have animation completed exactly after .timeOffset seconds instead of the whole .duration — use .repeatDuration property. I've added layer.repeatDuration = layer.timeOffset to your resumeLayerBackwards(layer:) method.

The project works only with both lines added.

I can't say that the solution is really logical for me, although it works. Negative speed works a bit unpredictable as for me. In my project I used to reverse animation by swapping begin and end values in cloned animation object.

TO get the string in an EditText you use editText.getText() not editText.toString(). The first gets the text entered by the user (or your app). The second gets a string representation of the edit text object.

As you are already using jQuery how about use Slick for your slider and integrate EasyZoom into your slick slides?

Loads of cool features, check it... https://kenwheeler.github.io/slick/

We can utilise slick's dots to manipulate dot buttons into image thumbnails, so no extra html in your original markup 👍🏼

Read my comments in working example below and jsfiddle.

Please note the easyzoom does not zoom very much because the demo images we are using are natively only 600px wide.

jsFiddle version... https://jsfiddle.net/joshmoto/mdkpnw7g/

Working stack example...

Actually it is as easy as listening for both - touch and mouse - events. The touchstart event is the mousedown, the touchmove the mousemove and lastly touchend is the mouseup equivalent.

Theoretically you could simply add the same callback functions to all of these listeners. The only problem is you can't directly query the 'mouse' position using the event.clientX property inside the callback function. That's because there can be multiple touches while there is always just a single mouse event. To keep track of the touches, those are stored in a TouchList - more or less an array - which is the .touches property of the event.

So we need to make a distinction between a mouse and a touch event inside the callback function:

• If it's a touch use event.touches[0].clientX
• If it's a mouse event use event.clientX

Here's an example based on your code: