In swift 3 update i am getting this error message
kindly let me know if there is any change in method call.
Thanks
You need to use an array for curveEaseInOut:
UIView.animate(withDuration: duration, delay: 0.0, option: [.curveEaseIn, .curveEaseOut], animations: { [weak self]() -> void in }
The curveEaseInOut has been removed in Swift 3.0, so here is the workaround to achieve the animation.
Related
I'm posting this in case anyone else ran into the same issue. As of Feb 2022 amCharts v5 is still very new and the demo code seems to need a little curation on amCharts' part i.e. Show us that the object needs to be declared with a type - AND TELL US WHICH TYPE TO USE!
I copied the code from this demo example verbatim
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({});
series0.bullets.push(function() {
let graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});
and got the following error
Even the documentation page does not suggest specifying the type
I reached out to amCharts via their support system and got the following response:
Hi Adam,
How about specifying Circle as a generics for themplate?
let circleTemplate: am5Template<am5.Circle> Yours sincerely,
Martynas Majeris amCharts
First off am5Template is not valid, but I assumed he meant am5.Template
Second, his code is not complete and did not compile as-is.
I tried a few variations and the following worked:
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let circleTemplate = am5.Template.new({}); // <-- demo code
// let circleTemplate3: am5Template<am5.Circle>; // <-- code provided by the support person
let circleTemplate2: am5.Template<am5.Circle> = am5.Template.new({}); // <-- WORKING modification of the suggested code
// let circleTemplate1: am5Template<am5.Circle> = am5.Template.new({}); // attempted variation of the suggested code
series0.bullets.push(function() {
let graphics = am5.Circle.new(root, {
fill: series0.get("fill"),
}, circleTemplate2); // <-- compiler now sees the object as the appropriate object type
return am5.Bullet.new(root, {
sprite: graphics
});
});
Another example (from the same demo) which requires the same modification, but with a different template type:
// Add bullet
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/#Bullets
let starTemplate: am5.Template<am5.Star> =am5.Template.new({});
series1.bullets.push(function() {
let graphics = am5.Star.new(root, {
fill: series1.get("fill"),
spikes: 8,
innerRadius: am5.percent(70),
}, starTemplate);
return am5.Bullet.new(root, {
sprite: graphics
});
});
So yeah, maybe this will help someone who ran into the same issue as me. What would be REALLY nice is if they had Cope Pen examples that use TS and not just JS
First things first. I absolutely love GSAP and their Scrolltrigger. Everything works fine, but unfortunately, the object I move on the x-axis based on scroll does not update when the user resizes his browser window.'
The x value is based on a formula I wrote.
Here is a part of the function later added in a master timeline with matchMedia Scrolltrigger:
var seoShowBenefitsTl = gsap.timeline();
seoShowBenefitsTl.addLabel("first Benefit")
.to(".anim-screen-item-0", {opacity: 0, duration: 0.5}, "first Benefit")
.to(seoATFHardware, {x: () => (document.documentElement.clientWidth - seoATFHardware.clientWidth) / 2 + calculateOffsetToElement(document.querySelector('.anim-point-item.--revenue'), 120, "right"), duration: 1, ease: Power3.in, onUpdate: function() {
if (this.progress() >= 0.5) {
document.querySelector('.anim-screen-item.--revenue').classList.add("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.add("js-point-item-engaged");
} else {
document.querySelector('.anim-screen-item.--revenue').classList.remove("js-screen-item-engaged");
document.querySelector('.anim-point-item.--revenue').classList.remove("js-point-item-engaged");
}
}}, "first Benefit")
//some more code
return seoShowBenefitsTl
Thank you so much in advance!
Make sure you add the actual tween to the ScrollTrigger timeline, not a timeline. This helps making sure the values get update easier because of the following point.
Use invalidateOnRefresh: true on the ScrollTrigger timeline.
Doing those things results in this demo.
https://github.com/fluttercandies/extended_image
https://github.com/fluttercandies/extended_image/tree/master/example
https://github.com/fluttercandies/extended_image/blob/master/example/lib/pages/zoom_image_demo.dart
fluttercandies extended_image. How do I zoom in on an image with double tap of 1 finger instead of needing 2? How do I get a sliding image to navigator pop back when it slides off the page?
Trying to implement a zoom/pan image with double tap by 1 finger instead of the need for 2 to expand zoom an image. Have two issues with this code and was wondering if anyone has any ideas. The class is very simple with just 2 strings: image & title passed into it.
1, I need the image to expand on double tap. I would like the user to have to power to expand the image with one finger and not two. Think I need to put this code near the very end.
The good thing is that once it is expanded the double tap works to reduce the image size. How do I get it to do the opposite when it is at normal size?
2, the sliding of the image off the page results in a black screen. Thankfully, this doesn’t freeze or crash the app but it leaves the user with a blank screen and the need to press the system back button. I would like the slide to result in a navigator pop back to the original screen.
Firstly, here’s a sample code of how I’m passing an image and a title into expandimage.dart.
FlatButton(
child: Image.asset(_kAsset5),
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ExpandImage(
image: _kAsset5,
title: "\'go help\' 1",
)),
);
},
),
Here’s the code that I’m using for this ‘expandimage.dart’ and a lot of it is based on the pan/zoom example from flutter candies / extended image example.
import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';
class ExpandImage extends StatelessWidget {
final String image, title;
ExpandImage({this.image, this.title});
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.red[900],
appBar: AppBar(
backgroundColor: Colors.red[900],
leading: IconButton(
icon: Icon(Icons.close),
onPressed: Navigator.of(context).pop,
),
title: Text(
title,
style: TextStyle(
color: Colors.yellow,
inherit: true,
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
letterSpacing: 2.0, //1.2
),
),
centerTitle: true,
),
body: SizedBox.expand(
// child: Hero(
// tag: heroTag,
child: ExtendedImageSlidePage(
slideAxis: SlideAxis.both,
slideType: SlideType.onlyImage,
child: ExtendedImage(
//disable to stop image sliding off page && entering dead end without back button.
//setting to false means it won't slide at all.
enableSlideOutPage: true,
mode: ExtendedImageMode.gesture,
initGestureConfigHandler: (state) => GestureConfig(
minScale: 1.0,
animationMinScale: 0.8,
maxScale: 3.0,
animationMaxScale: 3.5,
speed: 1.0,
inertialSpeed: 100.0,
initialScale: 1.0,
inPageView: false,
),
// onDoubleTap: ? zoom in on image
fit: BoxFit.scaleDown,
image: AssetImage(
image,
),
),
),
),
),
);
}
}
Here is a sample image passed in. the page turns red when sliding the image around and then it goes black as the image slides off the page.
Hope it will help, if have any doubt ask in the comments.
class _DetailState extends State<Detail> with TickerProviderStateMixin{
#override
Widget build(BuildContext context) {
AnimationController _animationController = AnimationController(duration: Duration(milliseconds: 200),vsync: this);
Function() animationListener = () {};
Animation? _animation;
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
child: ExtendedImage.network(
widget.wallpaper.path,
fit: BoxFit.contain,
mode: ExtendedImageMode.gesture,
initGestureConfigHandler: (state) {
return GestureConfig(
minScale: 0.9,
animationMinScale: 0.7,
maxScale: 3.0,
animationMaxScale: 3.5,
speed: 1.0,
inertialSpeed: 100.0,
initialScale: 1.0,
inPageView: false,
initialAlignment: InitialAlignment.center,
);
},
onDoubleTap: (ExtendedImageGestureState state) {
///you can use define pointerDownPosition as you can,
///default value is double tap pointer down postion.
var pointerDownPosition = state.pointerDownPosition;
double begin = state.gestureDetails!.totalScale!;
double end;
_animation?.removeListener(animationListener);
_animationController.stop();
_animationController.reset();
if (begin == 1) {
end = 1.5;
} else {
end = 1;
}
animationListener = () {
//print(_animation.value);
state.handleDoubleTap(
scale: _animation!.value,
doubleTapPosition: pointerDownPosition);
};
_animation = _animationController
.drive(Tween<double>(begin: begin, end: end));
_animation!.addListener(animationListener);
_animationController.forward();
},
),
),
}
}
If it helps, mark it as right.
I can't seem to get my map to load in Xcode 6.2 Beta, it just sticks on the spinning icon. Currently I have the following code in my Map interface controller:
import WatchKit
import Foundation
class MapInterfaceController: WKInterfaceController {
#IBOutlet weak var LocationMap: WKInterfaceMap!
override func awakeWithContext(context: AnyObject?) {
super.awakeWithContext(context)
var centerLocation = CLLocationCoordinate2DMake(51.505248, -0.113838)
self.LocationMap.setVisibleMapRect(MKMapRect(origin: MKMapPointForCoordinate(centerLocation), size: MKMapSizeMake(0.5, 0.5)))
self.LocationMap.setRegion(MKCoordinateRegion(center: centerLocation, span: MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005)))
}
}
Which then causes my map to not load properly and I end up with the spinning loading icon which never fully loads.
I'm sure I'm probably just missing something obvious as I'm fairly new to all this, but I can't seem to find any resources at all that will show me what I'm missing, or talk me through this process to help me see exactly what I've overlooked.
I have nearly the same code and it works fine for me. A few remarks:
setRegion sets the center coordinate as well as the visible map region so there is no need to call setVisibleMapRect prior.
Your properties and variables should not start with a capital letter (although this is not the cause of the problem)
Here is the code I use:
let location = CLLocationCoordinate2D(
latitude: 51.505248,
longitude: -0.113838)
)
let region = MKCoordinateRegion(center: location, span: MKCoordinateSpan(latitudeDelta: 0.005, longitudeDelta: 0.005))
self.map.setRegion(region)
I need to animate something on a web page with the ExtJS 3.4 library loaded. The specification is to animate an element's color to red. As far as I can see from the Ext.Fx documentation this is not possible. Is there a workaround?
Alternatively, this chaining of effects:
info.fadeOut({ endOpacity: .25, duration: 2}).setStyle('color','#FF0000');
would be acceptable if the color change happened after the fadeOut ended, but there seems to be no way to specify a callback function.
Try animate method and color animation type:
info
.animate(
{
opacity: { to: .25 }
},
0.5,
null,
'easeOut',
'run'
)
.animate(
{
color: { to: '#FF0000' }
},
0.5,
null,
'easeOut',
'color'
);
Working sample: http://jsfiddle.net/yRGUw/