美文网首页iOS
iOS大转盘效果

iOS大转盘效果

作者: 幻想无极 | 来源:发表于2017-08-08 16:13 被阅读50次
EE67D80A-1667-499C-A097-4EA5AC2702E0.gif
demo链接:https://github.com/tqhnet/WJCircleTableView
部分代码:

- (void)setupShapeFormationInVisibleCells
{
    //获取所有可见的cell下标
    NSArray *indexpaths = [self indexPathsForVisibleRows];
    NSUInteger totalVisibleCells =[indexpaths count];
    
    CGFloat angle_gap = M_PI/(_totalCellsVisible+1); // find the angle difference after dividing the table into totalVisibleCells +1
    
    //减去2个行高得到中心区域的一半
    
    //(self.frame.size.height - self.rowHeight*2.0f)/2.0f
    CGFloat vRadius = (self.frame.size.height - self.rowHeight*2.0f)/2.0f;
    //宽度的一半
    CGFloat hRadius = (self.frame.size.width )/2.0f;
    //那个小就用哪个
    CGFloat radius = (vRadius <  hRadius) ? vRadius : hRadius;
    
    CGFloat xRadius = radius;
    
    //初始cell的偏移
    CGFloat firstCellAngle = [self getAngleForYOffset:self.contentOffset.y];
    
    for( NSUInteger index =0; index < totalVisibleCells; index++ )
    {
        //得到对应的cell
        WJCircleTabCell *cell = (WJCircleTabCell*)[self cellForRowAtIndexPath:[ indexpaths objectAtIndex:index]];
        //得到cell的frame
        CGRect frame = cell.frame;

        //We can find the x Point by finding the Angle from the Ellipse Equation of finding y
//        i.e. Y= vertical_radius * sin(t )
//         t= asin(Y / vertical_radius) or asin = sin inverse
//        CGFloat angle = (index +1)*angle_gap -( ( percentage_visible) * angle_gap);
        
        //变更角度
        CGFloat angle = firstCellAngle;
        NSLog(@"angle = %f",angle);
        firstCellAngle+= angle_gap;
        if( _contentAlignment == WJCircleTableViewContentAlignmentLeft )
        {
            angle =  angle + M_PI_2;
        }
        else {
            angle -= M_PI_2;
        }
        
        //Apply Angle in X point of Ellipse equation
        //i.e. X = horizontal_radius * cos( t )
        //here horizontal_radius would be some percentage off the vertical radius. percentage is defined by HORIZONTAL_RADIUS_RATIO
        //HORIZONTAL_RADIUS_RATIO of 1 is equal to circle
        
        //
        CGFloat x = xRadius  * cosf(angle );
        
        //Assuming, you have laid your tableview so that the entire frame is visible
        //TO DISPLAY RIGHT: then to display the circle towards right move the cellX (var x here) by half the width towards the right
        //TO DISPLAY LEFT : move the cellX by quarter the radius
        //FEEL FREE to play with x to allign the circle as per your needs
        
        
        if( _contentAlignment == WJCircleTableViewContentAlignmentLeft )
        {
            x = x + self.frame.size.width/2;// we have to shift the center of the circle toward the right
        }
        
        //算出x坐标改变位置,主要就是酸楚x位置进行改变
        frame.origin.x = x - 60;
        cell.deviation = x - 60;
        NSLog(@"x = %f",x);
        
        if( !isnan(x))
        {
//            frame.size.height = x/(self.frame.size.width/2) *60;
//            frame.size.height = x/100 * 100;
            cell.frame = frame;
//            cell.alpha = x/(self.frame.size.width/2);
        
        }
    }
}

总结:效果不是很理想,想发优化中...有想法的可联系

相关文章

网友评论

    本文标题:iOS大转盘效果

    本文链接:https://www.haomeiwen.com/subject/uumalxtx.html